Why is it that the react component uses data-* to add custom properties that cannot be found on the page?

now the question is why I added a custom attribute to the third-party react component library why data-*, can"t find this property in the page.


The attributes of the props and dom elements of the

component are two completely different concepts. Only the attributes written directly on the native tag component (div/p/span, etc.) will be added directly to the dom element, and the others need to be added manually:

// SelectTab.render()
<div data-name={this.props['data-name']}></div>

data-name is passed into the SelectTab component as props, and this property will not be available on the final page if the render method inside the component does not use data-name props.

Menu