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

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

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

你只需做两件事：

因此控制台中的代码可能类似于：

> getComponent($0).props

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

Answer 3

将状态或道具对象分配给窗口对象：

window.title = this.state.title

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

window.title.length

8

Answer 4

尽管可接受的答案有效，并且是一种很好的方法，但是到2020年，您现在可以进行很多检查，而无需使用$r方法。选择相关组件时，React DevTools的“组件”选项卡将向您显示道具和详细状态（确保您处于正确的级别），并让您执行其他操作，例如挂起它或检查匹配的DOM元素（小右上角的图标）。

Answer 5

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

document.getElementById('ROOT')

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

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