如何从reactjs组件访问“key”属性

Question

如何访问组件的key属性。我以为它会在this.props中，但事实并非如此。

e.g。

<ProductList
    key = {list.id}
    listId = {list.id}
    name = {list.name}
    items = {list.items}
/>

如果我这样做，则在产品列表中

console.log(this.props)

返回

Object {listId: "list1", name: "Default", items: Array[2]}

根本没有关键属性。我可以创建另一个属性并为其分配相同的值，但由于密钥属性已被使用，因此它似乎是多余的。

此外，key属性是否必须在整个组件中是唯一的，或者只是在从它呈现的循环或集合中？

Answer 1

React使用key属性，并且不会向您公开。您将要使用自定义属性并传入该数据。我建议使用具有语义意义的属性名称; key仅用于在协调期间帮助识别DOM节点，因此使用另一个名为listId的属性是有意义的。

key属性对于整个组件不需要是唯一的，但我相信它对于您所在的嵌套级别（通常是循环或集合）应该是唯一的。如果React检测到重复key的问题（在开发版本中），则会抛出错误：

  

警告：flattenChildren（...）：遇到两个具有相同密钥的孩子.$a。子键必须是唯一的;当两个孩子共用一把钥匙时，只会使用第一个孩子。

Answer 2

键：this._reactInternalFiber.key

索引：this._reactInternalFiber.index