今天我們要來介紹的是React進階功能中的 Fragment 他的功能是當你在使用Component回傳多個element的時候，fragment可以幫助你不用再去呼叫DOM就可以完成回傳多個element，這樣一來可以省下一些時間，幫助我們更有效率地完成編碼的工作。

例子
假設我們現在有一個表格

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

我們需要在表格裡面添加我們的東西，如果將 parent div 元素放在 中的 render() 區塊中，出來的html將會錯誤

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello123</td>
        <td>World456</td>
      </div>
    );
  }
}

所以，這時候fragment就派上用場了，當我們使用fragment的時候，只要在 <React.Fragment>語法內輸入你所要的表格就可以省去建立兩個class的麻煩事了

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello123</td>
        <td>World456</td>
      </React.Fragment>
    );
  }
}

除了這個寫法之外，還提供了更簡單的寫法

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

這看起來就像空標籤，但是他不支援 key 和 attribute!