[譯]React高級指引6：Fragments

原文連接：reactjs.org/docs/fragme…

引言

React一個經常使用的模式是組件返回多個元素。Fragment能夠爲你的子元素分組而不須要在DOM上爲它們添加額外的節點。

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

還有一種短語法能夠用來聲明它們。

動機

一個經常使用的模式是組件返回一列子元素。讓咱們來看看下面這個React片斷：

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

爲了使渲染出的HTML可以有效展現，<Columns />須要返回多個<td>。可是若是<Columns />的render方法中有一個<div>做爲父元素，那麼最終渲染出來的HTML是無效的。

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

最終在中的結果是：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
複製代碼

很顯然這是無效的HTML，Fragment爲這一問題提供瞭解決方案。

用法

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}
複製代碼

上面的代碼會在

中渲染出正確的代碼：

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>
複製代碼

短語法

這裏有一種短語法能夠用來聲明Fragment，它看起來就像是空標籤：

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}
複製代碼

你能夠像使用其餘元素同樣使用它，除了它不支持key和屬性。

帶key的Fragments

使用<React.Fragment>語法聲明的Fragment是能夠有key的。一個使用場景是將集合映射到一組Fragment數組。舉個例子：建立一個描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        //若是沒有key，React將會展現一個key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
複製代碼

key是惟一能傳遞給Fragment的屬性。在將來，咱們可能會支持其餘如事件處理器的屬性。

在線Demo

你能夠在CodePen中嘗試這個新的Fragment語法。