← Back to rules

react/jsx-no-duplicate-props 正しさ

何をするか

このルールは、JSX 要素内の重複するプロパティを防止します。

なぜ悪いのか

JSX 要素に重複するプロパティがあるのは、ほとんどの場合ミスです。 重複するプロパティを持つ JSX 要素を作成すると、アプリケーションで予期しない動作が発生する可能性があります。

例

このルールに対して 誤り のコードの例：

<App a a />;
<App foo={2} bar baz foo={3} />;

このルールに対して 正しい コードの例：

<App a />;
<App bar baz foo={3} />;

eslint-plugin-react との違い

このルールは ignoreCase オプションをサポートしていません。大文字と小文字が異なるプロパティは別物とみなされ、重複として警告されません（例：<App foo Foo /> は許可されます）。これは意図的な設計であり、JSX ではプロパティ名が大文字・小文字を区別するためです。

使い方

設定ファイルまたは CLI でこのルールを 有効化 するには、次のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-duplicate-props": "error"
  }
}

CLI

oxlint --deny react/jsx-no-duplicate-props --react-plugin

参照

• ルールのソース