← Back to rules

react/no-children-prop 正しさ

何を行うか

子要素がプロパティを使用して渡されていないかをチェックします。

なぜ問題なのか

子要素は常に実際の子要素であるべきであり、プロパティとして渡すべきではありません。 JSX を使用する場合、子要素は開始タグと終了タグの間にネストされるべきです。 JSX を使用しない場合、子要素は React.createElement に追加の引数として渡されるべきです。

例

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

<div children='子要素' />

<MyComponent children={<AnotherComponent />} />
<MyComponent children={['子要素 1', '子要素 2']} />
React.createElement("div", { children: '子要素' })

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

<div>子要素</div>
<MyComponent>子要素</MyComponent>

<MyComponent>
  <span>子要素 1</span>
  <span>子要素 2</span>
</MyComponent>

React.createElement("div", {}, '子要素')
React.createElement("div", '子要素 1', '子要素 2')

使い方

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-children-prop": "error"
  }
}

CLI

oxlint --deny react/no-children-prop --react-plugin

参照

• ルールのソース