为什么多个JSX标签需要包装？——深入解析包装到另一个标签或片段中的原理
在React开发中，初学者经常会遇到一个经典的编译报错：Adjacent JSX elements must be wrapped in an enclosing tag（相邻的JSX元素必须包装在一个封闭标签中）。这就引出了本文的核心问题：为什么多个JSX标签需要包装？下面我们将从JavaScript的底层逻辑出发，详细解析这一规则的成因及解决方案。
一、 核心原因：JavaScript函数的返回值机制
JSX本质上只是React.createElement(component, props, ...children)的语法糖。而一个React组件，归根结底就是一个JavaScript函数。在JavaScript中，一个函数只能返回一个值。如果你想要返回多个值，必须将它们组合成一个整体（比如放入数组或对象中）。
当我们在组件中尝试返回多个并列的JSX标签时，相当于一个函数试图返回多个独立的结果，这在JavaScript语法层面是不允许的。
// 错误写法：函数无法返回多个独立值
function MyComponent() {
return (
<h1>标题</h1>
<p>内容</p>
);
}
// 编译后的真实代码：
function MyComponent() {
return (
React.createElement('h1', null, '标题')
React.createElement('p', null, '内容') // 语法错误，缺少逗号或分号
);
}二、 解决方案1：包装到另一个HTML标签中
最直观的解决方法是将多个并列的JSX元素用一个父级HTML标签（如<div>）包裹起来。这样，函数就只返回了一个根元素，符合JavaScript的语法规范。
// 正确写法：使用div包裹
function MyComponent() {
return (
<div>
<h1>标题</h1>
<p>内容</p>
</div>
);
}这种方法的缺点：
虽然添加<div>解决了问题，但它会在真实的DOM树中额外插入一个节点。在复杂的组件嵌套中，这会导致DOM层级过深，产生所谓的“DOM嵌套地狱”。这不仅会影响页面渲染性能，还可能破坏依赖严谨DOM结构的CSS布局（例如使用Flexbox或Grid时，多余的包裹层会导致样式失效）。
三、 解决方案2：包装到片段中
为了解决多余DOM节点的问题，React引入了Fragment（片段）的概念。Fragment允许你将子元素列表分组，而不会在DOM中添加额外的节点。
Fragment有两种使用语法：
1. 显式写法：React.Fragment
function MyComponent() {
return (
<React.Fragment>
<h1>标题</h1>
<p>内容</p>
</React.Fragment>
);
}2. 简写语法：<></>
这是最常用且最简洁的写法，空标签<>等同于<React.Fragment>。
function MyComponent() {
return (
<>
<h1>标题</h1>
<p>内容</p>
</>
);
}Fragment的优势：
无多余DOM节点：渲染后DOM树中只有
<h1>和<p>，没有多余的包裹层。保证CSS布局完整性：不会因为强行添加的
<div>而破坏Flex或Grid的排版。
四、 Fragment的进阶用法：key属性
在渲染列表时，React要求必须为每个列表项提供唯一的key属性。如果你使用简写语法<></>，是无法为其添加key的，此时必须退回使用显式写法<React.Fragment>。
function Columns() {
const items = [
{ id: 1, name: '项目一' },
{ id: 2, name: '项目二' }
];
return (
<>
{items.map(item => (
// 此处不能写 <> key={item.id}>，简写不支持key属性
<React.Fragment key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
</React.Fragment>
))}
</>
);
}总结
多个JSX标签需要包装，其根本原因是JavaScript函数只能返回单一值的语法限制。在实际开发中，我们应该优先使用Fragment（<></>）来包装多个并列元素，避免生成无意义的DOM节点，从而保持DOM结构的整洁和应用性能的高效。只有在需要添加key属性的场景下，才使用<React.Fragment>的显式写法。
更多关于React组件渲染的底层机制，您可以参考：React核心概念深度解析。