← Back to rules

react/jsx-max-depth スタイル

何をするか

ネストされた JSX 要素やフラグメントの最大深さを制限します。

なぜ悪いのか

極端に深いネストされた JSX は、コンポーネントの読みやすさと保守性を低下させます。

例

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

const Component = () => (
  <div>
    <div>
      <div>
        <span />
      </div>
    </div>
  </div>
);

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

const Component = () => (
  <div>
    <div>
      <span />
    </div>
  </div>
);

設定

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

max

type: integer

default: 2

ネストされた JSX 要素やフラグメントの許容される最大深さ。

使用方法

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

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-max-depth": "error"
  }
}

CLI

oxlint --deny react/jsx-max-depth --react-plugin

参照

• ルールのソース