Ad

How To Tell Which Component Generated DOM Node?

- 1 answer

Is there a way to tell which component generated a specific DOM node?, e.g.

<CustomDiv>a</CustomDiv>
<div>b</div>
<div>c</div>

CustomDiv is a just a wrapper that generates <div /> element.

In DOM, these are represented as:

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

Is there a way to tell which of the DOM nodes have been generated by CustomDiv component?

Context:

I have a DecoratorComponent that wraps the render method of the component that it decorates. DecoratorComponent then modifies the resulting 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);

However, DecoratorComponent must modify DOM only thats produced by the target component, i.e. it should exclude the output of SomeOtherComponent.

I need to find a way to distinguish DOM that has been dynamically generated within the component ({['a', 'b', 'c'].map((letter) => { return <p>{letter}</p> })} in this example) and DOM thats generated by another component within the Foo component.

Ad

Answer

You can use React Developer Tools to inspect which DOM nodes have been rendered by which React component.

In addition, look into ./src/renderers/dom/client/ReactMount.js, which is the react-domObject used to manage DOM nodes and their relation to React components. Note that data-reactid attribute is referred to as ATTR_NAME in the source code.

Ad
source: stackoverflow.com
Ad