← 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 元素和片段的最大深度。

如何使用

要通过配置文件或命令行启用此规则，可以使用：

配置文件 (.oxlintrc.json)

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

命令行

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

参考资料

• 规则源码