React Developer Tools提供了很多功能来检查 React 组件树，并查看props、事件处理程序等。但是，我真正想做的是能够在浏览器控制台中检查这些数据结构。
在 chrome 中，我可以使用$0. 有没有办法从 中提取 React 组件信息$0，或者是否可以使用 React Dev Tools 做类似的事情？
如何在控制台中检查 React 元素的props和状态？
IT技术
google-chrome-devtools
reactjs
2021-04-26 07:39:41
4个回答
使用React Developer Tools，您可以$r获取对所选 React 组件的引用。
下面的屏幕截图显示了我React Developer Tools用来选择一个组件 ( Explorer)，它有一个名为 的状态对象nodeList。在控制台中，我现在可以简单地写入$r.state.nodeList以引用状态中的此对象。与props相同的作品（如：$r.props.path）
您的问题的答案可以在我问的类似问题中找到： React - 从 DOM 元素获取组件以进行调试
我在这里提供答案是因为我没有必要的声誉点来标记为重复或在上面发表评论。
基本上，如果您使用 react 的开发版本，这是可能的，因为您可以利用 TestUtils 来实现您的目标。
你只需要做两件事：
- 静态存储从 React.render() 获得的根级组件。
- 创建一个全局调试辅助函数，您可以在控制台中使用它使用 $0 访问您的静态组件。
所以控制台中的代码可能类似于：
> getComponent($0).props
getComponent 的实现可以React.addons.TestUtils.findAllInRenderedTree通过在所有找到的组件上调用 getDOMNode 并与传入的元素进行匹配来搜索匹配项。
打开控制台（Firefox、Chrome）并定位任何 reactjs 渲染的 DOM 元素或执行 js 脚本来定位它：
document.getElementById('ROOT')
然后在对象属性查看器中检查元素属性以获取名称以“__reactInternalInstace$....”开头的属性，展开 _DebugOwner 并查看 stateNode。
找到的 stateNode 将包含（如果有）'state' 和 'props' 属性，这些属性在 reactjs 应用程序中被大量使用。
尽管接受的答案有效，并且是一种很好的方法，但在 2020 年，您现在可以在不使用该$r方法的情况下进行大量检查。当您选择相关组件时，React DevTools 的 Components 选项卡将向您显示props和详细状态（确保您处于正确的级别），以及让您执行其他操作，例如暂停它或检查匹配的 DOM 元素（很少右上角的图标）。
