Day16 Fragment

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>
     </>
    );
  }
}