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

Question

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

在 chrome 中，我可以使用 [=10=] 在控制台中使用当前选择的 DOM 元素。有没有办法从 [=10=] 中提取 React 组件信息，或者是否可以使用 React Dev Tools 做类似的事情？

Answer 1

你的问题的答案可以在我问过的类似问题中找到：

我在这里提供一个答案，因为我没有必要的信誉点数来标记为重复或在上面发表评论。

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

你只需要做两件事：

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

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

> getComponent([=10=]).props

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

Answer 2

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

window.title = this.state.title

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

window.title.length

8

Answer 3

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

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

Answer 4

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

document.getElementById('ROOT')

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

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

Answer 5

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

Answer 6

您可以附加对 window 对象的引用，例如

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

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

How do you inspect a react element's props & state in the console?

google-chrome-devtools

reactjs