Fragments

本节目标：理解“Fragments”的核心思路，并能把它用于实际开发或面试表达。

React 中的一个常见模式是一个组件返回多个元素。
Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
还有一种新的[短语法](https://react.docschina.org/docs/fragments.html#short-syntax)可用于声明它们。

**动机**
一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例：
class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}
<Columns /> 需要返回多个 <td> 元素以使渲染的 HTML 有效。如果在 <Columns /> 的 render() 中使用了父 div，则生成的 HTML 将无效。
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}
得到一个 <Table /> 输出：
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
Fragments 解决了这个问题。

**用法**
class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>);
  }
}
这样可以正确的输出 <Table />：
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

**短语法**
你可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签：
class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}
你可以像使用任何其他元素一样使用 <> </>，除了它不支持 key 或属性。

**带** **key** **的** **Fragments**
使用显式 <React.Fragment> 语法声明的片段可能具有 key。
一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
key 是唯一可以传递给 Fragment 的属性。
未来我们可能会添加对其他属性的支持，例如事件。

> 来自

 <https://react.docschina.org/docs/fragments.html>

Fragments ​

Fragments