如何访问组件的key属性.我以为会在这里面.props ,但不是.

例如

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

如果我在产品 list 上

console.log(this.props)

返回

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

完全没有密钥属性.我可以创建另一个属性并为其指定相同的值,但它似乎是多余的,因为key属性已经被使用了.

此外,密钥属性在整个组件中必须是唯一的,还是仅在其渲染的循环或集合中必须是唯一的?

推荐答案

key属性由React under The hood使用,不会expose 给您.您需要使用自定义属性并将数据传入.我建议使用语义上有意义的属性名称;key只是为了在协调期间帮助识别DOM node ,所以拥有另一个名为listId的属性是有意义的.

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

警告: children (…):遇到两个子元素用同一把 keys ,.$a.子密钥必须是唯一的;当两个子元素共享一把 keys 时,只会使用第一个子元素.

Reactjs相关问答推荐

如何通过TEK查询将对象传递到Express后台

更新数据时有关CQR和更新UI的问题

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

在构建或部署Reaction应用程序时出错

在每页上应用字体-NextJS

使用VITE的Reaction应用程序的配置是否正确?

在React中使用映射创建flex组件

在迭代状态时无法读取未定义的属性(读取 map )

滚动视图样式高度没有任何区别

UseEffect 似乎不适用于页面的首次渲染

在 useSelector() 中使用 array.map() 如何导致组件在分派操作时重新渲染?

Mui Datepicker 设置了错误的日期

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

如何使用 redux 和 react-plotly.js

为什么 setState 在 React 中不是异步的?

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次?

如何从 React Redux store 中删除特定项目?

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

单击三个按钮之一后如何显示特定按钮的内容?单击其中一个按钮后应隐藏所有按钮

React中`onScroll`和`onScrollCapture`之间的区别?