是否有可能通过浏览器（从另一个脚本内部或通过控制台）访问和设置现有 React 组件的状态和props？
我知道 Angular 有一种方法可以访问范围和更改变量，但是使用 React 我一直找不到方法。
我认为一定有某种方式，因为 Facebook 的 React Developer Tools 扩展能够从页面上的 React 组件获取所有信息（props、状态、组件、事件侦听器），并有可能更改它们。
如果有可能通过 JavaScript 做到这一点，那将是怎样的方式呢？
如何从浏览器设置 React 组件状态和props
IT技术
google-chrome-extension
reactjs
2021-05-20 05:48:00
3个回答
如果你有React devtools 扩展，你可以通过你的浏览器控制台使用$r.
首先，在 React devtools 选项卡中选择您想要操作的组件：
然后，用于$r对组件进行操作，例如读取状态$r.state或设置状态$r.setState({ ... })：
要从浏览器设置react组件的状态，您可以将一个函数绑定到将触发设置状态的窗口对象。
在 react 组件的构造函数中，您可以这样做。
constructor (props){
super(props);
window.changeComponentState = (stateObject) => {
this.setState ({stateObject});
}
}
在浏览器控制台中，您可以执行此操作。
window.changeComponentState ({a:'a'});
警告：这是反模式。这会起作用，但你永远不应该这样做。
要从浏览器设置状态，请将其粘贴在组件中的某个位置，例如render()：
globalSetState = function(state){this.setState(state)}.bind(this);
注意：重要的是不要使用var，因为这是使定义的函数可以全局访问的原因。
您现在可以globalSetState({x: 'y'})在控制台中调用。
警告：这太丑了，就像console.log()调试一样，应该在您的实时应用程序中删除。