Skip to content
← Back to rules

react/jsx-key 正しさ

何をするか

配列内の要素に対して key プロップを強制します

なぜ悪いのか

React では、配列内の要素に対して key プロップが必要です。これにより、どのアイテムが変更され、追加されたか、削除されたかを識別するのに役立ちます。

このルールに違反するコードの例:

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

このルールに従っているコードの例:

jsx
[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 で以下のように使用できます:

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-key": "error"
  }
}
bash
oxlint --deny react/jsx-key --react-plugin

参照