gpt4 book ai didi

google-chrome-devtools - 如何在控制台中检查 react 元素的 Prop 和状态?

转载 作者:行者123 更新时间:2023-12-03 12:55:43 24 4
gpt4 key购买 nike

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

在 Chrome 中,我可以使用 $0 在控制台中处理当前选定的 DOM 元素。有没有办法从 $0 中提取 React 组件信息,或者是否可以使用 React 开发工具执行类似的操作?

最佳答案

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

下面的屏幕截图向您展示了我使用 React Developer Tools 选择一个组件 (Explorer),该组件有一个名为 nodeList 的状态对象。现在,我可以在控制台中简单地编写 $r.state.nodeList 来引用状态中的该对象。同样适用于 Prop (例如:$r.props.path)

Using $r to reference a React Component

关于google-chrome-devtools - 如何在控制台中检查 react 元素的 Prop 和状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29155044/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com