React常常碰到一個Component需要回傳多個React元素的情形，之前的我在遇到這類情況時，由於JSX的語法只能有一個根元素的關係，就會選擇在外層放一個<div>，但有時候這會導致你的HTML架構變糟，例如你需要生成一個清單列表或表格時，但透過fragment便能再不用新增DOM節點的情況下，重組你的React Component。

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

使用情境

如上所述，當我們若需要產生表格或清單列表等需要回傳一連串的 child element時，就可以使用React Fracment了。

class Menu extends React.Component {
  render() {
    return (
      <nav>
        <ul>
          <Lists />
        </ul>
      </nav>
    );
  }
}

為了創造一個清單，下一步需要讓 <Lists /> 回傳多個<li>回來，但由於JSX只能有一個的關係，若照以往用<div>包覆的方式去解決問題的話，就會選染出無效的HTML架構出來。

class Lists extends React.Component {
  render() {
    return (
      <div>
        <li>Hello</li>
        <li>World</li>
      </div>
    );
  }
}

//最終瀏覽器選染出的HTML會變成這樣
<nav>
  <ul>
    <div>
      <li>Hello</li>
      <li>World</li>
    </div>
  </ul>
</nav>

使用方式

用 <React.Fragment>包覆即可解決此問題。

class Lists extends React.Component {
  render() {
    return (
     <React.Fragment>
        <li>Hello</li>
        <li>World</li>
     </React.Fragment>
    );
  }
}

//最終瀏覽器選染出的HTML會變成這樣
<nav>
  <ul>
      <li>Hello</li>
      <li>World</li>
  </ul>
</nav>

以下是簡寫的語法，用空標籤包住:

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