React 碎片(Fragments)

当我们存在以下情况的时候，往往会出项问题

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>

会导致td失效，这个时候就可以使用碎片，把Cloums改成下面这样就可以了

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

这样渲染出来的就正常了，会忽略掉碎片层