Fragments(精讀React官方文檔—18)

ragments存在的意義是什麼？

Fragments旨在解決一個元件包含多個元素，但是無需向DOM添加額外節點。

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

動機

以下面的代碼為例，如果Columns元件傳回多個td元素才能實作效果，但是如果我們在Columns元件中使用了div父元素，則會使td元素失效。Fragment則可以解決這個問題。

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>
    );
  }
}
複制代碼      

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

用法

• 使用React.Fragment代替原本的div

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

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的屬性。

更多内容，請關注我的專欄，一起學習React!