如何从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属性已被使用.

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

Answer 1

该key物业由React在引擎盖下使用,不会暴露给您.您将要使用自定义属性并传入该数据.我建议使用具有语义意义的属性名称; key只是为了在协调期间帮助识别DOM节点,因此调用另一个属性listId是有意义的.

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

警告:flattenChildren(...):遇到两个孩子用同一把钥匙,.$a.子键必须是唯一的; 当两个孩子共用一把钥匙时,只会使用第一个孩子.

啊，是的，我明白了。因此，在服务器-客户端架构中，最好使用服务器生成的密钥（例如数据库的主键）？ (2认同)
所以…我开始向组件传递一个 `key=` （对于 React）和一个 `id=`，它在逐条记录的基础上是相同的 (`key={1} id={1 }`) ...这工作正常，但对我来说似乎是重复的。 (2认同)
我能理解为什么感觉重复。记住一个 prop 用于您的应用程序逻辑，另一个 prop 用于 React，这可能会有所帮助，它们只是碰巧具有相同的值。 (2认同)

Answer 2

关键:this._reactInternalFiber.key

指数:this._reactInternalFiber.index

请记住，这是在访问React内部。React团队可以在没有通知的情况下重命名/删除_reactInternalFiber，而无需将其标记为重大更改。 (12认同)
这个答案适用于那些真正想要访问不寻求建议的密钥的人 (8认同)