如何从浏览器设置React组件状态和道具

Question

是否有可能通过浏览器（从另一个脚本内部或通过控制台）访问和设置现有React组件的状态和道具？

我知道Angular有一种方法可以访问范围和更改变量，但是使用React我还没有找到方法。

我认为必须有某种方法因为来自Facebook的React Developer Tools扩展能够从页面上的React组件获取所有信息（道具，状态，组件，事件监听器），并且可以更改它们

如果有可能通过JavaScript执行此操作，那将是这样做的方法吗？

Answer 1

如果您拥有React devtools extension，则可以使用$r通过浏览器控制台访问React范围。

首先，在React devtools选项卡中选择要操作的组件：

然后，使用$r对组件进行操作，例如使用$r.state读取状态或使用$r.setState({ ... })设置状态：

Answer 2

要从浏览器设置反应组件的状态，可以将函数绑定到将触发设置状态的窗口对象。

在react组件的构造函数中，您可以这样做。

constructor (props){
    super(props);
    window.changeComponentState = (stateObject) => {
        this.setState ({stateObject});
    }
}

在浏览器控制台中，您可以执行此操作。

window.changeComponentState ({a:'a'});

警告：这是反模式。这样可行，但你永远不应该这样做。

Answer 3

要从浏览器设置状态，请将其粘贴到组件中的某个位置，例如render()：

  globalSetState = function(state){this.setState(state)}.bind(this);

注意：离开var非常重要，因为这是使全局可以访问定义函数的原因。

您现在可以在控制台中呼叫globalSetState({x: 'y'})。

警告：这很难看，而且，就像调试console.log()一样，应该在您的实时应用中删除。