Fragment

在一个 React 组件中返回多个元素是一件很常见的事情。但是例如下面这个例子，可能就比较难以达到目的。

function Table(props) {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

function Columns(props) {
  return (
    <div>
      <td>Column 1</td>
      <td>Column 2</td>
    </div>
  );
}

在这个示例中，Table 组件的渲染就将出现问题，因为 <table>标签的结构中是不能出现 <div> 标签的。但是又必须在组件中返回一个根标签结构，这种情况下，Fragment 就派上用场了。

Fragment 不会输出任何 UI，只是用来对需要返回的同级标签做分组。所以上面的这个示例就可以改成以下这个样子。

function Columns(props) {
  return (
    <React.Fragment>
      <td>Column 1</td>
      <td>Column 2</td>
    </React.Fragment>
  );
}

除了显式使用 <React.Fragment> 标签以外，还可以使用以下这样的简短模式。

function Columns(props) {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
    </>
  );
}

如果用在循环里，每个子元素都需要使用一个 key 属性来进行唯一化标记，这时就必须使用显式的 Fragment 标签，例如 <React.Fragment key={item.id>}。