你如何检查控制台中反应元素的道具和状态？

Question

React Developer Tools提供了很多权力来检查React组件树，并查看道具，事件处理程序等。但是，我真正想做的是能够在浏览器控制台中检查这些数据结构。

在chrome中，我可以使用$0在控制台中使用当前选定的DOM元素。有没有办法从$0中提取React组件信息，还是可以使用React Dev Tools做类似的事情？

Answer 1

使用React Developer Tools，您可以使用$r来获取对所选React组件的引用。

以下屏幕截图显示我使用React Developer Tools选择一个组件（Explorer），该组件具有一个名为nodeList的状态对象。在控制台中，我现在可以简单地编写$r.state.nodeList来引用状态中的此对象。与道具相同（例如：$r.props.path）

Answer 2

您可以在我问的类似问题中找到您的问题的答案：React - getting a component from a DOM element for debugging

我在这里提供一个答案，因为我没有必要的声誉点来标记为重复或在上面评论。

基本上，如果您使用react的开发版本，这是可能的，因为您可以利用TestUtils来实现您的目标。

你只需要做两件事：

所以控制台中的代码可能类似于：

> getComponent($0).props

getComponent的实现可以使用React.addons.TestUtils.findAllInRenderedTree通过在所有找到的组件上调用getDOMNode并匹配传入的元素来搜索匹配。

Answer 3

将state或prop对象分配给window对象：

window.title = this.state.title

然后从开发工具控制台中，您可以在公开的对象上尝试不同的方法，例如：

window.title.length

8

Answer 4

打开控制台（Firefox，Chrome）并找到任何reactjs呈现的DOM元素，或者执行js脚本来定位它：

document.getElementById('ROOT')

然后在对象属性查看器中检查名称开头为'__reactInternalInstace $ ....的属性的元素属性，展开_DebugOwner并查看stateNode。

找到的stateNode将包含（如果有）'state'和'props'属性，这些属性在reactjs app中大量使用。