react/jsx-max-depth Style

强制限制嵌套 JSX 元素和片段的最大深度。

过度嵌套的 JSX 会让组件更难阅读和维护。

以下是此规则的错误代码示例：

jsx

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

以下是此规则的正确代码示例：

jsx

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

配置

此规则接受一个包含以下属性的配置对象：

类型：integer

默认值：2

允许的嵌套 JSX 元素和片段的最大深度。

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

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

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-max-depth": "error",
  },
});

bash

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

此规则是在 v1.36.0 中添加的。