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