React JSX中已有外层div为何仍需使用Fragment？

为什么已经有外层<div className="app">，还要用Fragment包裹<Employee />？ #

React的JSX规则是：任何需要返回的元素块（包括条件渲染的分支）都必须有一个单一的根元素。

你代码里的外层<div className="app">是整个组件return的根容器，但条件判断showEMployees ? ... : ...的两个分支各自是独立的返回块。当showEMployees为true时，你要渲染3个<Employee />组件——如果不用Fragment（或者其他容器）包裹，这就相当于在条件分支里直接返回了多个同级元素，违反了“单一根”的规则，所以必须用Fragment把它们包成一个整体。

Fragment的作用就是在不额外渲染真实DOM节点的前提下，满足“单一根”的要求，比用额外的<div>更轻量化。

删除外层div.app或Fragment时为什么会报错？ #

两种情况都是因为违反了React的“单一根元素”规则：

• 删除外层div.app：整个组件的return内容就变成了条件表达式的结果。当showEMployees为true时，若同时删了Fragment，条件分支直接返回3个同级的<Employee />，整个return就没有了单一的根元素，因此触发报错。
• 删除Fragment：当showEMployees为true时，条件分支直接返回3个<Employee />，这是多个同级元素，不符合“单一根”的要求，React无法识别这种结构，所以报错“需要父元素”。

内容的提问来源于stack exchange，提问作者Pawan Bhattarai