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

【问题标题】：How to access the "key" property from a reactjs component如何从 reactjs 组件访问“key”属性
【发布时间】：2016-02-14 10:42:35
【问题描述】：

如何访问组件的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 属性是否必须在整个组件中是唯一的，或者只是在它被呈现的循环或集合中？

【问题讨论】：

标签： reactjs

【解决方案1】：

key 属性在后台被 React 使用，不会暴露给你。您将需要使用自定义属性并将该数据传入。我建议使用具有语义意义的属性名称； key 仅用于在协调期间帮助识别 DOM 节点，因此拥有另一个名为 listId 的属性是有意义的。

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

警告：flattenChildren(...)：遇到两个孩子使用相同的密钥，.$a。子键必须是唯一的；当两个孩子共享一个密钥时，只会使用第一个孩子。

【讨论】：

@JasonFB React 可以创建唯一键，但它不能在不同的渲染调用中创建一致的键（在重新排序元素时使用）。
啊，我明白了。所以在服务器-客户端架构中，最好使用服务器生成的密钥（例如数据库的主密钥）？
@JasonFB 是的，任何一致的东西都可以，服务器生成的主键效果很好
所以...我已经开始传递组件key=（用于React）和id=，它们恰好在逐个记录的基础上是相同的（key={1} id={1}） ......这工作正常，但似乎重复的书。
我能理解为什么感觉重复。记住一个 prop 用于您的应用程序逻辑而另一个用于 React 可能会有所帮助，它们恰好具有相同的值。

【解决方案2】：

密钥：this._reactInternalFiber.key

索引：this._reactInternalFiber.index

【讨论】：