← Back to rules

react/jsx-key 正确性

它做了什么

强制在数组中的元素上使用 key 属性

为什么这是不好的？

React 要求数组中的元素必须有 key 属性，以便帮助识别哪些项目发生了变化、新增或删除。

示例

此规则的错误代码示例：

[1, 2, 3].map((x) => <App />);
[1, 2, 3]?.map((x) => <BabelEslintApp />);

此规则的正确代码示例：

[1, 2, 3].map((x) => <App key={x} />);
[1, 2, 3]?.map((x) => <BabelEslintApp key={x} />);

配置

此规则接受一个配置对象，包含以下属性：

checkFragmentShorthand

type: boolean

default: true

当为 true 时，检查片段简写语法 <> 是否包含 key 属性

checkKeyMustBeforeSpread

type: boolean

default: true

当为 true 时，要求 key 属性必须位于任何展开属性之前

warnOnDuplicates

type: boolean

default: true

当为 true 时，对重复的 key 值发出警告

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-key": "error"
  }
}

CLI

oxlint --deny react/jsx-key --react-plugin

参考资料

• 规则源码