06 Fragments

Fragments

Fragments可以理解成：多个片段，多个部分（React元素返回的Fragments）

在此之前，我们开发的组件 return 的都是单个React元素，想要返回多个元素就必须使用父元素包裹这些子元素，然后返回这个父元素。

然而，这并不总是能满足要求的，例如在下述场景中，嵌套div将导致表格不能正常渲染

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

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

// 渲染后的 <Table />输出
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragments的出现解决了这样的问题，它可以让React组件返回多个元素而不需要嵌套父元素

用法

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

这样table组件就可以正常的渲染了！

短语法

React提供了一种新的，更加简短的语法来声明Fragments，它看起来就是个空标签！

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

你可以像用其他标签一样来使用它，但注意：它不支持key和属性

带key的Fragments

使用显式的<React.Fragments>语法可以使用key属性。一个示例场景：将一个数组映射到一个Fragments数组，创建一个描述列表。

function Glossary(props) {
  return (
    <div>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </div>
  )
}

key是唯一可以传递给Fragment的属性，未来可能会添加其他属性，比如事件。