ReactFragment用法介紹

react中一個常見模式是一個組件返回多個元素，Fragments允許你將子列表分組，而無需像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> 元素。如果一個父 div 在 <Columns /> 的 render()**** 函數里面使用，那么最終的 HTML 將是無效的。

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

 

在 <Table /> 組件中的輸出結果如下：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

 

所以，我們介紹 Fragments。

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>

 

如果子元素需要父元素包裹起來，但是不需要渲染父元素，我們就可以使用fragment。其實它的功能和vue的template一樣，都只是占位，不渲染。
我們也可以把<React.Fragment></React.Fragment>簡寫為<></>,看着像空組件；
<></> 是 <React.Fragment/> 的語法糖。
<></> 語法不能接受鍵值或屬性。

如果你需要一個帶 key 的片段，你可以直接使用 <React.Fragment /> 。
一個使用場景是映射一個集合為一個片段數組 — 例如：創建一個描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒有`key`，將會觸發一個key警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

key 是唯一可以傳遞給 Fragment 的屬性。在將來，我們可能增加額外的屬性支持，比如事件處理。

原作者：這樣就好_yang，原鏈接：https://www.jianshu.com/p/36bb4d88f26c