---
url: /docs/guide/usage/linter/rules/react/jsx-max-depth.md
---

### 它的作用

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

### 为什么这不好？

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

### 示例

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

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

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

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

## 配置

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

### max

类型：`integer`

默认值：`2`

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

## 如何使用

## 版本

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

## 参考资料