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

Question

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

在chrome中,我可以使用控制台中当前选定的DOM元素$0.有没有办法从$0React Dev Tools中提取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 - 从DOM元素获取组件以进行调试

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

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

你只需要做两件事:

• 静态存储从React.render()获得的根级别组件.
• 创建一个全局调试助手函数,您可以在控制台中使用$ 0访问静态组件.

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

> getComponent($0).props

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

Answer 3

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

Answer 4

打开控制台（Firefox、Chrome）并定位任何 reactjs 渲染的 DOM 元素或执行 js 脚本来定位它：

document.getElementById('ROOT')

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

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