react 带你了解下 Fragments

React.Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

例如：

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

你也可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签。

例如：

render() {
  return (
    <>
      {condition ? (
        <ChildA />
      ) : (
        <ChildB />
      )}
    </>
  );
}

当需要给 Fragments 标签添加 key 值时，不能使用简短的“空标签”语法，必须显示的使用 React.Fragments。

例如：

render() {
  <div>
    {arr.map((item, idx) => {
      return (
        <React.Fragment key={idx}>
          {condition ? (
            <ChildA />
          ) : (
            <ChildB />
          )}
        </React.Fragment>
      );
    })
  </div>
}

本文参考：https://zh-hans.reactjs.org/docs/fragments.html