react使用时，返回多组件遇到的坑

在使用react时，一种常见的情况是组件返回多个元素，通常我会在最外层加一个div返回。
这样在大部分情况其实也没有什么，只是会多了一个额外的div。
但是当我们遇到像td这样的元素时

class MyTable 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>
    );
  }
}

这时候其实最好的办法是使用React.Fragment,他允许组件返回多个元素，但是无需向DOM中添加额外节点。

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

这样的话，输出则外:

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