React中无需用Fragment包裹即可返回多个元素的原因是什么？

你遇到的这个情况是React 16.0之后新增的特性——组件可以直接返回元素数组，不需要额外用Fragment或者容器元素包裹。

你代码里的names.map(...)刚好返回了一个包含多个<h3>元素的数组，完全符合React的返回规则，所以能正常渲染。

不过要提醒你，数组里的每个元素必须添加唯一的key属性，这是React列表渲染的强制规范（虽然不写也能运行，但会触发控制台警告），修改后的代码应该是这样：

function App() {
  const names = ["jack", "taylor", "justin", "joy", "pink"];

  return names.map((name) => <h3 key={name}>{name}</h3>);
}

export default App;

在React 16.0之前的版本，确实要求组件必须返回单个根元素，那时候才必须用Fragment或者<div>这类容器来包裹多个元素。

内容的提问来源于stack exchange，提问作者Johnny Chen