Reactフラグメント

恥ずかしながらReactフラグメントってこの間知りました。
メモします。

できること

Reactの場合、一つのコンポーネントが描画するDOMは一つの親要素にまとめなければいけません。
下のやつはNG例です。

const sample = () => {
  return (
    <h1>サンプルコンポーネント</h1>
    <p>サンプルテキスト</p>
  );
};

これは次の例のように一つの親要素に含めてしまえばOKです。

const sample = () => {
  return (
    <div>
      <h1>サンプルコンポーネント</h1>
      <p>サンプルテキスト</p>
    </div>
  );
};

しかし、これだと実際には必要のないdivタグが増えてしまい、ソースコードの見た目的にもよろしくないです。
(公式だとTableタグの中にdivタグが入るシチュエーションを使って説明しています。)

これを解決してくれるのがReact.flagmentです。

使い方

使い方は簡単でdivタグの代わりにReact.flagmentタグで囲って上げるだけです。

const sample = () => {
  return (
    <React.Fragment>
      <h1>サンプルコンポーネント</h1>
      <p>サンプルテキスト</p>
    </React.Fragment>
  );
};

下のようにもかけます。

const sample = () => {
  return (
    <>
      <h1>サンプルコンポーネント</h1>
      <p>サンプルテキスト</p>
    </>
  );
};

公式には、ループ処理の中でリストを作るときなんかに作る例もありました