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

Question

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

例如

<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

该key属性由React在后台使用，并且不会暴露给您。您将要使用自定义属性并将该数据传递进来。我建议使用语义上有意义的属性名称；key只是为了在对帐期间帮助识别DOM节点，因此拥有另一个称为属性的属性listId是有意义的。

该key属性不必对于整个组件都是唯一的，但是我认为它对于您所在的嵌套级别（因此通常是循环或集合）应该是唯一的。如果React检测到重复key的问题（在开发版本中），它将引发错误：

警告：flattenChildren（…）：遇到两个具有相同密钥的孩子.$a。子键必须是唯一的；当两个孩子共享一个密钥时，将仅使用第一个孩子。