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

IT技术 reactjs
2021-04-17 02:48:53

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

2个回答

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

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

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

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

关键this._reactInternalFiber.key

索引:this._reactInternalFiber.index

请记住,这是访问 React 内部结构。React 团队可以_reactInternalFiber在没有通知的情况下重命名/删除,也不会将其标记为破坏性更改。
2021-05-26 02:48:53
此答案适用于那些真正想要访问密钥而不是寻求建议的人
2021-06-09 02:48:53