react组件使用data-*添加自定义属性为什么会在页面中找不到？

Question

现在有个问题就是我在第三方的react组件库中添加自定义属性data-*,为什么在页面中找不到这个属性。

Answer 1

组件的props和dom元素的属性是两个截然不同的概念，只有直接写在原生标签组件（div/p/span 等）上的属性才会直接添加到dom元素上，其他的需要手动添加：

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

Answer 2

data-name是作为props传入到SelectTab组件中的，如果组件内部的render方法没有使用data-name props的话，最终页面上就不会有这个属性。