问题描述
React开发人员工具提供了很多功能来检查反应组件树，并查看道具，事件处理程序等.但是，我真正想做的是能够在浏览器控制台中检查那些数据结构.
React Developer Tools give a lot of power to inspect the React component tree, and look at props, event handlers, etc. However, what I'd really like to do is to be able to inspect those data structures in the browser console.
在chrome中，我可以使用$0在控制台中使用当前选择的DOM元素.是否可以从$0中提取React组件信息，或者可以使用React Dev Tools做类似的事情?
In chrome I can play with the currently selected DOM element in the console using $0. Is there a way to extract React component info from $0, or is it possible to do something similar with the React Dev Tools?
推荐答案
使用反应开发人员工具，您可以使用$r获取对所选React组件的引用.
Using React Developer Tools you can use $r to get a reference to the selected React Component.
以下屏幕截图显示了我使用React Developer Tools选择一个具有状态对象nodeList的组件(Explorer).现在，在控制台中，我可以简单地编写$r.state.nodeList来引用状态中的该对象.与道具(例如:$r.props.path)
The following screenshot shows you that I use React Developer Tools to select a component (Explorer) which has a state-object callednodeList. In the console I can now simply write $r.state.nodeList to reference this object in the state. Same works with the props (eg.: $r.props.path)
这篇关于您如何检查反应元件的道具和装备?控制台中的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！