ReactのFragmentsって便利

今回はReactの開発において今後積極的に使っていこうと思ったものを紹介したいと思います！

タイトルにも書いてある通り、Fragmentsです。

言葉で説明するよりも下記のコードを見た方が理解し易いです。

import * as React from "react";

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>データ1</td>
        <td>データ2</td>
      </div>
    );
  }
}

ここで<td>タグのリストをレンダリングしたいのに余計なノードをDOMに追加しなけばいけません。階層が余計に深くなったりルートの要素に余分なスタイルを当てなければいけない時などが出てくる可能性があります。

もやもやしますよね・・・

React v16 からはこの忌まわしき問題から解放されます！！

新たにFragmentを読み込みます。

このように書くことで上記の問題を回避することができるのです！簡単ですね！

import React, { Fragment } from 'react'

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>データ1</td>
        <td>データ2</td>
      </React.Fragment>
    );
  }
}

レンダリングされた結果がこちらになります。

<td>データ1</td>
<td>データ2</td>

また別の記述の仕方があります。

import React, { Fragment } from 'react'

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>データ1</td>
        <td>データ2</td>
      </>
    );
  }
}

こちらの書き方はまだサポート他のツールでサポートされていないようなので<React.Fragment>を使用することが推奨されています。

簡単ではありますが、是非活用してみてください！