reactjs – 如何判断哪个组件生成了DOM节点？

概述有没有办法告诉哪个组件生成了一个特定的DOM节点？ <CustomDiv>a</CustomDiv><div>b</div><div>c</div> CustomDiv只是一个生成< div />的包装器.元件. 在DOM中,这些表示为： <div data-reactid=".0.0.$/=11">a</div><div data-reactid=".0.0.$/=12">b</div> 有没有办法告诉哪个组件生成了一个特定的DOM节点？

<Customdiv>a</Customdiv><div>b</div><div>c</div>

Customdiv只是一个生成< div />的包装器.元件.

在DOM中,这些表示为：

<div data-reactID=".0.0.$/=11">a</div><div data-reactID=".0.0.$/=12">b</div><div data-reactID=".0.0.$/=13">c</div>

有没有办法告诉Customdiv组件生成了哪些DOM节点？

语境：

我有一个DecoratorComponent包装它装饰的组件的render方法.然后,DecoratorComponent修改生成的DOM.

let Foo;Foo = class extends React.Component {    render () {        return <div>            <SomeOtherComponent />            {['a','b','c'].map((letter) => { return <p>{letter}</p> })}        </div>;    }};Foo = DecoratorComponent(Foo);

但是,DecoratorComponent必须仅修改目标组件生成的DOM,即它应该排除SomeOtherComponent的输出.

我需要找到一种方法来区分在组件中动态生成的DOM({[‘a’,’b’,’c’].map((letter)=> {return< p> {letter} < / p>})}在此示例中)和由Foo组件中的另一个组件生成的DOM.

解决方法 您可以使用 React Developer Tools来检查哪些DOM节点已由哪个React组件呈现.

另外,请查看./src/renderers/dom/client/ReactMount.js,它是用于管理DOM节点及其与React组件的关系的react-dom对象.请注意,data-reactID属性在源代码中称为ATTR_name.

总结

以上是内存溢出为你收集整理的reactjs – 如何判断哪个组件生成了DOM节点？全部内容，希望文章能够帮你解决reactjs – 如何判断哪个组件生成了DOM节点？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。