Fragments

Fragments

• React 中的一个常见模式是一个组件返回多个元素

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

```jsx harmony

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

## 动机

```jsx harmony

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

• Columns 需要返回多个 td 元素以使渲染的 HTML 元素有效

• 如果在 Columns 的 render() 中使用了父 div，则生成的 HTML 将无效

• 而使用 React.Fragment 来当作父元素就可以正确生成 HTML

短语法

• <> </> 可以像使用任何其他元素一样使用，除了不支持 key 或 属性

```jsx harmony

class Columns extends React.Component { render() { return ( <> </> ); } }

```

带 key 的 Fragments

• 使用显示的 React.Fragments 语法声明的片段可能具有 key

• key 使唯一可以传递给 Fragment 的属性