【React】不要タグを出力させないFragmentの使い方

React

JSX(htmlみたいなもの)のルールで、returnで返されるJSXのルートは一つで束ねられている必要があります。
そのために、divタグなどで囲うことで束ねることができますが、
不要なタグを書きたくない場合があります。
そのようなときに使えるのが、Fragment(フラグメント)です。

ReactのFragmentの使い方

const Func = () => {
  return (
    <div>
      <div className="func">
        <h3>タイトル</h3>
      </div>
      <h3>タイトル2</h3>
      <p>文章文章文章文章文章</p>
    </div>
  );
};

上をFragmentを使って書き換えると、以下のようになります。

const Func = () => {
  return (
    <>
      <div className="func">
        <h3>タイトル</h3>
      </div>
      <h3>タイトル2</h3>
      <p>文章文章文章文章文章</p>
    </>
  );
};

明治的にFragmentと書くことも可能です。

import { Fragment } from "react";

const Func = () => {
  return (
    <Fragment>
      <div className="fonc">
        <h3>タイトル</h3>
      </div>
      <h3>タイトル2</h3>
      <p>文章文章文章文章文章</p>
    </Fragment>
  );
};

Fragmentにつけられる属性はKeyのみ

import { Fragment } from "react";

const Func = () => {
  return (
    <Fragment key="">
      <div className="fonc">
        <h3>タイトル</h3>
      </div>
      <h3>タイトル2</h3>
      <p>文章文章文章文章文章</p>
    </Fragment>
  );
};

Fragmentはそもそも出力されないため、クラスといった属性などはつけても表示されません。
しかし、key属性だけは付与させることができます。
逆にkey属性をつけるときは、Fragmentを明示的に書く必要があります。

Fragmentの注意点

Fragmentはｈｔｍｌには表示されませんが、JavaScript上には残ります。
よって、あまり不必要に使うとデータも大きくなったり、可能性は低いですがバグの原因になりかねないので、
必要なときだけ記述するようにします。

React

Posted by devsakaso