← Back to rules

react/jsx-props-no-spreading スタイル

何をするのか

JSX のプロパティスプレッドを禁止する

なぜ問題なのか

すべての JSX 属性に対してスプレッドが行われないことを強制します。これにより、コンポーネントに渡されるプロパティが明確になるため、コードの可読性が向上します。 また、意図しない追加プロパティを渡すのを回避し、無効な HTML プロパティが HTML 要素に渡された際に React が警告を発信できるようにする点でも、保守性の向上に貢献します。

例

このルールに違反する 不正な 例：

<App {...props} />
<MyCustomComponent {...props} some_other_prop={some_other_prop} />
<img {...props} />

このルールに従った 正しい 例：

const {src, alt} = props;
const {one_prop, two_prop} = otherProps;
<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
<img src={src} alt={alt} />

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。

custom

type: "ignore" | "enforce"

default: "enforce"

custom が ignore に設定されると、App や MyCustomComponent などのカスタム JSX タグすべてを無視します。デフォルトは enforce です。

exceptions

type: string[]

default: []

例外は特定のコンポーネントに対して強制動作を反転させます。 たとえば：

• html が ignore に設定されている場合、div に対する例外は <div> 要素に対してこのルールを適用します。
• custom が enforce に設定されている場合、Foo に対する例外は <Foo> コンポーネントに対してこのルールを無視します。

これにより、個別のコンポーネントに対して一般的な設定を上書きできます。

explicitSpread

type: "ignore" | "enforce"

default: "enforce"

explicitSpread が ignore に設定されると、そのスプレッド内にすべてのオブジェクトプロパティが明示的にリストアップされているスプレッド演算子を無視します。デフォルトは enforce です。

html

type: "ignore" | "enforce"

default: "enforce"

html が ignore に設定されると、div や img などのすべての HTML JSX タグを無視します。デフォルトは enforce です。

使い方

このルールを構成ファイルまたは CLI で 有効化 するには、以下のように使用できます：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース