反应项目脚本linter错误缺少迭代器中元素的“关键”道具

如何解决反应项目脚本linter错误缺少迭代器中元素的“关键”道具

我正在从父组件打电话

import { ChildClass } from '../../path/to/child'
<ChildClass
            appData={appData}
            deviceOS={deviceOS}
            mobileFlag={mobileFlag}
/>

和子组件

const ChildClass = props => {
           const appData = props.appData,mobileFlag = props.mobileFlag,deviceOS = props.deviceOS
           return(<div>Hello etc.</div>)}
export { ChildClass }

但是我在linter中遇到了错误-

error    Missing "key" prop for element in iterator                                              react/jsx-key

请提出任何解决方案。

解决方法

好像您在迭代中呈现ChildClass组件。为此，React使用key组件来标识ChildClass的每个实例，并控制每个组件的渲染/重新渲染。

<ChildClass
  key={uniqueId}
  appData={appData}
  deviceOS={deviceOS}
  mobileFlag={mobileFlag}
/>

键必须是唯一的，因此通常您使用从Parent类获得的唯一属性（可以是事件ID，用户名等）。您还可以使用Interator函数的index属性或uuidv4之类的库。

const childItems = childs.map((child,index) =>
  <ChildClass
    key={index}
    appData={appData}
    deviceOS={deviceOS}
    mobileFlag={mobileFlag}
  />
)

尽管如此，请考虑一下React文档中的以下说明：

如果项的顺序可能更改，我们不建议使用索引作为键。这可能会对性能产生负面影响，并可能导致组件状态出现问题

每当在迭代中显示元素列表时，都应添加具有唯一标识值的关键道具，以帮助React跟踪更改。如果您错过了，则您的linter可能配置为失败。

React lists and keys