課題: 正しい DOM 構成のままコンポーネントを分離したい

ある Table コンポーネントの td 要素をひとまとめにした、Columnsコンポーネントを用意したいとします。

const Table = () => (
  <table>
    <tbody>
      <tr>
        <Columns />
      </tr>
    </tbody>
  </table>
);

td 要素をまとめるとき、div で囲ってしまうとノードの構成がおかしくなってしまいます。

const Columns = () => (
  <div>
    <td>1</td>
    <td>2</td>
  </div>
);

展開後の HTML

<table>
  <tbody>
    <tr>
      <div>
        <td>1</td>
        <td>2</td>
      </div>
    </tr>
  </tbody>
</table>

tr と td の間に div が入ってしまい正しい構成ではありません。

React.Fragmentを使うことで解決できました。

import React, { Fragment } from "react";

const Columns = () => (
  <Fragment>
    <td>1</td>
    <td>2</td>
  </Fragment>
);

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

React.Fragment は展開時に無視されるので、正しい構成になりました。

<Fragment> ... </Fragment>を<> ... </>と省略して書くこともできます。
ただ、ツールがこの省略記法にまだ対応していない可能性があるため、Fragment を使ったほうが無難とのことです。

ja.reactjs.org