原文链接： https://bobbyhadz.com/blog/react-return-multiple-elements

作者： Borislav Hadzhiev

正文从这开始~

fragment

使用React fragment 从组件中返回多个元素。比如说， <><div>First</div><div>Second</div></> ，当我们需要在不向DOM添加额外节点的情况下，对一个子元素列表进行分组时，就会用到React Fragments。

export default function App() {
  return (
      <div>First</div>
      <div>Second</div>
我们使用了一个Reactfragment来分组一个子元素的列表，而没有向DOM添加额外的节点。
该截图显示，我们的相邻div元素已经被添加到DOM中，而没有被包裹在一个额外的DOM节点中。
你也可能会看到更多的fragments 语法。
import React from 'react';
export default function App() {
  return (
    <React.Fragment>
      <div>First</div>
      <div>Second</div>
    </React.Fragment>
上面的两个示例会取得相同的结果。他们都对一个子元素的列表进行分组，而没有向DOM添加额外的节点。
现在大多数代码编辑器都支持更简明的语法，所以更常用。
然而需要注意的是，如果你必须要给fragment传递key属性，你就必须使用更为详细的语法。
import React from 'react';
export default function App() {
  const arr = ['First', 'Second'];
  return arr.map(element => {
    return (
      <React.Fragment key={element}>
        <div>{element}</div>
      </React.Fragment>
如果你使用了简写fragment语法<> </> ，你将无法给fragment传递任何属性。
另一种解决方案是将子元素包裹在另一个DOM元素中，例如div。
export default function App() {
  return (
      <div>First</div>
      <div>Second</div>
这样就会解决无法传递属性的问题。因为我们没有返回多个元素，而是返回一个包含多个子元素的div元素。
在React组件中，我们必须只返回单个元素。因为从函数中返回多个值是无效语法。
React组件只是函数，所以当我们在同一级别返回多个元素时，我们实际上是在函数的同一级别使用多个return语句。
function render() {
  return React.createElement('div', null, 'First');
  return React.createElement('div', null, 'Second');
第二个return语句是不可达的，并且属于无效语法。
另一方面，当我们使用fragment或者其他元素来包裹元素时，该函数只返回一个带有多个子元素的单一值，这样便解决了错误。