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

Posted 2023-03-07

技术标签:

【中文标题】您如何在控制台中检查反应元素的道具和状态？【英文标题】：How do you inspect a react element's props & state in the console? 【发布时间】：2015-05-23 04:25:32 【问题描述】：

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

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

【问题讨论】：

为什么不直接在组件中记录状态和道具？因为这需要更多时间我自己还没有尝试过，但是在 React 0.13 中他们引入了React. findDOMNode。从理论上讲，可以选择您的 DOM 元素，通过 React.findDOMNode($0) 将其转换为 React 元素并通过该 ReactElement 访问您的状态和道具？ @trekforever 它只返回相同的原生 DOM 节点。考虑到这个问题是先问的，新问题不会是重复的吗？ 【参考方案1】：

您可以像这样附加对窗口对象的引用

import  useSelector  from "react-redux";
function App() 

    // Development only
    window.store = useSelector((state) => state);

    return (
        <div className="App">
        </div>
    );


export default App;

然后从控制台访问它

store
states: …
states:
someProperty: false
[[Prototype]]: Object
[[Prototype]]: Object

[控制台][1] [1]：https://i.stack.imgur.com/A4agJ.png

【讨论】：

【参考方案2】：

虽然接受的答案有效，而且是一个很好的方法，但在 2020 年，您现在可以在不使用 $r 方法的情况下进行大量检查。 React DevTools 的 Components 选项卡将在您选择相关组件时显示道具和详细状态（确保您处于正确的级别），并允许您执行其他操作，例如暂停它或检查匹配的 DOM 元素（很少右上角的图标）。

【讨论】：

【参考方案3】：

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

document.getElementById('ROOT')

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

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

【讨论】：

【参考方案4】：

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

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

【讨论】：

看起来 $ri 只是 DOM 节点，而不是 react 组件实例。不确定你的意思。但问题是“如何检查反应组件的数据结构”。我认为$r 可以让你做到这一点。【参考方案5】：

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