为什么React移除div的key属性还抛出缺少key的警告？

列表key警告触发原因 #

React列表渲染的核心规则为：map方法返回的直接子元素必须绑定唯一的key属性。你当前将key写在了MyComponent内部的div节点上，而map循环返回的直接节点是<MyComponent />本身，这个外层组件未设置key，因此React会抛出缺少key的警告。

key属性未出现在HTML的原因 #

key是React内部用于虚拟DOM diff运算的特殊保留属性，不属于标准HTML属性，无论在任意React元素上声明key，该属性都不会被渲染到真实DOM中，这是React的原生设计，并非属性被意外移除。

将key属性绑定到map返回的MyComponent标签上即可：

{Object.keys(data).map(key => (
    <MyComponent key={key} id={key} data={data[key]} />
))}

额外说明：MyComponent内部div上声明的key没有实际作用，可直接删除，它既不会参与列表的diff判断逻辑，也不会输出到真实DOM节点上。

内容的提问来源于stack exchange，提问作者Teamol