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