React的JSX 标签闭合规则

JSX 标签闭合规则

对函数式组件和类式组件中标签进行说明

1. 成对标签

• 必须有开始和结束标签

// ✅ 正确
<div>内容</div>
<button>点击</button>
<CustomComponent>子内容</CustomComponent>

// ❌ 错误
<div>内容
<button>点击
<CustomComponent>子内容

2. 自闭合标签

• 必须以 /> 结尾

// ✅ 正确
<img src="image.jpg" />
<input type="text" />
<br />
<CustomComponent />

// ❌ 错误
<img src="image.jpg">
<input type="text">
<br>
<CustomComponent>

3. 特别说明

3.1 HTML 中可以不闭合的标签在 JSX 中必须闭合

// HTML 中允许的写法
<input type="text">
<br>
<img src="image.jpg">

// JSX 中必须的写法
<input type="text" />
<br />
<img src="image.jpg" />

3.2 自定义组件的闭合

// 无子元素时，两种写法都可以
<UserProfile />
<UserProfile></UserProfile>

// 有子元素时，必须使用成对标签
<UserProfile>
    <h1>用户信息</h1>
</UserProfile>

3.3 Fragment 的闭合

// 完整写法
<React.Fragment>
    <h1>标题</h1>
    <p>内容</p>
</React.Fragment>

// 简写形式
<>
    <h1>标题</h1>
    <p>内容</p>
</>

4. 为什么要严格闭合？

1. XML 规范

   • JSX 遵循 XML 的严格规范
   • 保证标签结构的完整性

2. 避免歧义

   • 明确的开始和结束
   • 防止嵌套结构混乱

3. 便于解析

   • 帮助 React 正确解析组件结构
   • 提高代码可维护性

4. 编译要求

   • JSX 编译器需要明确的标签结构
   • 不完整的标签会导致编译错误

记住：在 JSX 中，所有标签都必须正确闭合，这是一个必须遵守的语法规则！这有助于保持代码的规范性和可读性。