React.FragmentでDOMの構成を正しく保つ

記事作成日時： 2019/04/19 05:11

最終更新日時： 2019/04/19 05:14

課題: 正しい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>
);

<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を使ったほうが無難とのことです。