← Back to rules

react/jsx-no-useless-fragment 細部な

💡 A suggestion is available for this rule.

何をするか

不要なフラグメントの使用を禁止します。

なぜ悪いのか

フラグメントは、複数の子要素をグループ化するために使われ、DOM ツリーにノードを追加せずに済む有用なツールです。ただし、ときには単一の子要素を持つフラグメントになってしまうことがあります。この子要素が要素、文字列、または式の場合、フラグメントを使用する必要はありません。

例

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

<>foo</>
<div><>foo</></div>

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

<>foo <div></div></>
<div>foo</div>

設定

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

allowExpressions

type: boolean

default: false

単一の式子要素を持つフラグメントを許可する。

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、以下のようにします：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-useless-fragment": "error"
  }
}

CLI

oxlint --deny react/jsx-no-useless-fragment --react-plugin

参照

• ルールのソース