React-从DOM元素获取组件进行调试

JavaScript React.js

猿十三

2020-03-18

为了在控制台中进行调试，React中是否有任何机制可以使用DOM元素实例来获取支持的React组件？

先前已经在生产代码中使用此问题时询问过此问题。但是，我的重点是用于调试目的的开发版本。

我熟悉React的Chrome调试扩展，但是并非在所有浏览器中都可用。结合使用DOM Explorer和控制台，可以很容易地使用“ $ 0”快捷方式来访问有关突出显示的DOM元素的信息。

我想在调试控制台中编写如下代码：getComponentFromElement（$ 0）.props

即使在React开发构建中，也没有机制可以使用元素的ReactId来获取组件吗？

第2163篇《React-从DOM元素获取组件进行调试》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Near路易小胖 2020.03.18

安装React devtools并使用以下命令访问相应dom节点的反应元素（$ 0）。

为0.14.8

    var findReactNode = (node) =>Object.values(__REACT_DEVTOOLS_GLOBAL_HOOK__.helpers)[0]
.getReactElementFromNative(node)
._currentElement;
       findReactNode($0);

当然，它只是一个hack。

宝儿小小 2020.03.18

我刚刚阅读了文档，并且afaik没有一个外部公开的API可以让您直接进入并通过ID查找React组件。但是，您可以更新初始React.render()调用并将返回值保留在某个位置，例如：

window.searchRoot = React.render(React.createElement......

You can then reference searchRoot, and look through that directly, or traverse it using the React.addons.TestUtils. e.g. this will give you all the components:

var componentsArray = React.addons.TestUtils.findAllInRenderedTree(window.searchRoot, function() { return true; });

There are several built-in methods for filtering this tree, or you can write your own function to only return components based on some check you write.

More about TestUtils here: https://facebook.github.io/react/docs/test-utils.html

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android