Fragments

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

  1. render() {
  2. return (
  3. <React.Fragment>
  4. <ChildA />
  5. <ChildB />
  6. <ChildC />
  7. </React.Fragment>
  8. );
  9. }

还有一种新的短语法可用于声明它们。

动机

一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:

  1. class Table extends React.Component {
  2. render() {
  3. return (
  4. <table>
  5. <tr>
  6. <Columns />
  7. </tr>
  8. </table>
  9. );
  10. }
  11. }

<Columns /> 需要返回多个 <td> 元素以使渲染的 HTML 有效。如果在 <Columns />render() 中使用了父 div,则生成的 HTML 将无效。

  1. class Columns extends React.Component {
  2. render() {
  3. return (
  4. <div>
  5. <td>Hello</td>
  6. <td>World</td>
  7. </div>
  8. );
  9. }
  10. }

得到一个 <Table /> 输出:

  1. <table>
  2. <tr>
  3. <div>
  4. <td>Hello</td>
  5. <td>World</td>
  6. </div>
  7. </tr>
  8. </table>

Fragments 解决了这个问题。

用法

  1. class Columns extends React.Component {
  2. render() {
  3. return (
  4. <React.Fragment> <td>Hello</td>
  5. <td>World</td>
  6. </React.Fragment> );
  7. }
  8. }

这样可以正确的输出 <Table />

  1. <table>
  2. <tr>
  3. <td>Hello</td>
  4. <td>World</td>
  5. </tr>
  6. </table>

短语法

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

  1. class Columns extends React.Component {
  2. render() {
  3. return (
  4. <> <td>Hello</td>
  5. <td>World</td>
  6. </> );
  7. }
  8. }

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

带 key 的 Fragments

使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子,创建一个描述列表:

  1. function Glossary(props) {
  2. return (
  3. <dl>
  4. {props.items.map(item => (
  5. // 没有`key`,React 会发出一个关键警告
  6. <React.Fragment key={item.id}>
  7. <dt>{item.term}</dt>
  8. <dd>{item.description}</dd>
  9. </React.Fragment>
  10. ))}
  11. </dl>
  12. );
  13. }

key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持,例如事件。

在线 Demo

你可以在 CodePen 中尝试这个新的 JSX Fragment 语法。