Skip to content
← Back to rules

react/jsx-fragments スタイル

🛠️ An auto-fix is available for this rule.

何をするか

React フラグメントの省略形または標準形式を強制します。

なぜ問題なのか

フラグメントを使用するコードが一貫性のある形になるようにします。

設定

このルールは以下の文字列値のいずれかを受け入れます:

"syntax"

これはデフォルトモードです。省略形構文で React フラグメントを強制しますが、一つの例外があります。 省略形構文ではキーまたは属性がサポートされていないため、これらの機能を使用した標準形式のフラグメントに対しては警告しません。

このルールに対する誤りの例:

jsx
<React.Fragment>
  <Foo />
</React.Fragment>

このルールに対する正しい例:

jsx
<>
  <Foo />
</>
jsx
<React.Fragment key="key">
  <Foo />
</React.Fragment>

"element"

このモードでは、React フラグメントの標準形式を強制します。

このルールに対する誤りの例:

jsx
<>
  <Foo />
</>

このルールに対する正しい例:

jsx
<React.Fragment>
  <Foo />
</React.Fragment>
jsx
<React.Fragment key="key">
  <Foo />
</React.Fragment>

使用方法

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

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

参照