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

Question

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

我知道Angular有一种方法可以访问范围并更改变量,但是使用React我无法找到方法.

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

如果有可能通过JavaScript这样做,这将是这样做的方式？

Answer 1

如果您具有React devtools扩展名，则可以使用来通过浏览器控制台访问React范围$r。

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

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

Answer 2

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

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

注意：去掉 很重要var，因为这使得定义的函数可以全局访问。

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

警告：这太丑陋了，就像console.log()调试一样，应该在您的实时应用程序中删除。