从 Chrome devtools 调用组件函数

Question

抱歉，如果这是一个愚蠢的问题，但我想知道是否有可能从浏览器访问 React 组件中定义的函数？例如：

class Test extends React.Component {

  someFn = () => {

    console.log('hey!') 

  }

  render() { return <div>...</div> }

}

因此，一旦网站加载完毕并安装了组件，是否有可能以某种方式访问 javascript 并调用 someFn()？我知道，例如，Redux 变量存在于全局范围内并且可以操作这些变量，但我不确定类函数。如果是这样，我会假设这些类上的状态对象也是可编辑的，对吗？

Answer 1

使用React Developer Tools，您可以在 ⚛️Components 开发工具选项卡上的树中选择您的组件。选择后，该组件实例可以在控制台中作为 访问$r，允许您使用 调用您的函数$r.someFn()。

Answer 2

在开发者控制台中输入这行代码：(new Test()).someFn();