关于本篇文章。

这篇文章是关于React.Fragment的文章。它也兼具作者的备忘录的性质，可能有一些错误，请不要客气地在评论等地方联系我，以便更正。感谢！

“Fragment” 指的是

通常情况下，React组件必须具有一个根元素。使用Fragment可以突破这个限制，虽然返回值只能是一个元素，但是可以使用Fragment来实现。

一个公式的例子

比如说，假设有以下代码。
在Table类中调用了Columns组件。

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />?ここで呼び出してる
        </tr>
      </table>
    );
  }
}

这是刚刚被调用的Columns组件。
在return语句中，一个被div包围的元素被返回。在div元素里面是包含td元素的形象。
如前所述，在React组件中，只能返回一个元素。

class Columns extends React.Component {
  render() {
    return (
      <div>?これがないと、二つの要素をreturnしようとしてしまうので、あえて`div要素`で囲うことで要素を一つにまとめている。
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

最终的结果返回以下代码作为图像。

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

在这里，如果不用

标签来包装，而是使用React.Fragment，那么Columns组件的描述如下。

class Columns extends React.Component {
  render() {
    return (
      <>?React.Fragmentの代用。（<React.Fragment>でもよい。)
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

接着针对于以下代码的最终结果是这样的情景。

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

多余的