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

Question

有没有办法告诉哪个组件生成了特定的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>

有没有办法分辨哪个DOM节点是由CustomDiv组件生成的？

语境:

我有一个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.

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

Answer 1

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

另外,研究一下./src/renderers/dom/client/ReactMount.js,react-dom Object用于管理DOM节点及其与React组件的关系.请注意,data-reactid属性ATTR_NAME在源代码中称为.