为什么React组件render返回的JSX表达式不能有多个父元素？

这个报错本质上不是React故意给开发者设的限制，是JS语法和JSX编译原理共同带来的必然结果：

1. JSX不是浏览器原生支持的语法，所有写在JSX标签里的内容，最终都会被Babel这类编译工具转成原生JavaScript函数调用——比如你写的<Navbar />，编译后就是React.createElement(Navbar, 对应的props对象)，会生成一个独立的React元素对象。
2. 所有JavaScript函数的return语句，只能返回单个值。如果你在return后面直接放两个并列的JSX元素，相当于你试图同时返回两个完全独立的对象，这在JS语法层面根本无法通过解析——就像你写普通JS的时候直接return 1; 2，解析器根本不知道你要返回哪一个值，自然会抛出语法错误。

为什么加个div包裹就能跑通 #

当你用一个<div>把两个并列元素包起来时，这个div本身就是一个独立的、通过createElement生成的单个React元素，你之前写的<Navbar>和<Jumbotron>只会作为这个div的子节点存在。此时你的return语句只需要返回这一个div元素，完全符合JS函数“返回单个值”的规则，报错自然就消失了。

避免冗余DOM的替代写法 #

如果你不想为了满足规则，在页面里硬塞一个没有实际样式、布局作用的div，打乱DOM结构，可以用React内置的Fragment组件做包裹：

• 完整写法：在return里用<React.Fragment> 你的所有并列元素 </React.Fragment>包裹内容
• 简写形式：直接用<>和</>代替上面的Fragment标签，功能完全一致

这种方式和用div包裹的逻辑没有区别——都是提供一个单独的父级元素，满足“return单个值”的语法要求，唯一的差异是Fragment不会在最终渲染的真实DOM树里生成多余的节点。
很多新手会误以为这是React要求页面结构只能有一个顶级HTML节点，实际上这个约束和DOM结构没有任何关系，哪怕你return的是两个独立的数字、两个独立的字符串，只要没有被一个单独的父级包裹，JS解析器一样会报完全相同的语法错误。

内容的提问来源于stack exchange，提问作者Filip Huhta