<Fragment> (<>...</>){/* SVGアイコンはそのまま */}

<Fragment> は、多くの場合 <>...</> の構文で使用され、ラッパーノードなしで要素をグループ化できます。

<>
  <OneChild />
  <AnotherChild />
</>

リファレンス
- <Fragment>
使用方法

リファレンス {/* SVGアイコンはそのまま */}

`<Fragment>` {/* SVGアイコンはそのまま */}

単一の要素が必要な状況で要素をまとめてグループ化するには、<Fragment> でラップします。 Fragment で要素をグループ化しても、結果の DOM には影響しません。要素がグループ化されていない場合と同じです。空の JSX タグ <></> は、ほとんどの場合、<Fragment></Fragment> の省略形です。

Props {/* SVGアイコンはそのまま */}

**オプション** key: 明示的な <Fragment> 構文で宣言された Fragment には、キーを含めることができます。

注意点 {/* SVGアイコンはそのまま */}

Fragment に key を渡したい場合は、<>...</> 構文を使用できません。 'react' から Fragment を明示的にインポートし、<Fragment key={yourKey}>...</Fragment> をレンダリングする必要があります。
React は、<><Child /></> から [<Child />] に、またはその逆にレンダリングする場合、あるいは <><Child /></> から <Child /> に、またはその逆にレンダリングする場合、状態をリセットしません。これは、1 レベルの深さでのみ機能します。たとえば、<><><Child /></></> から <Child /> に変更すると、状態がリセットされます。正確なセマンティクスはこちらをご覧ください。

使用方法 {/* SVGアイコンはそのまま */}

複数の要素を返す

複数の要素をまとめてグループ化するには、Fragment、またはそれと同等の<>...</>構文を使用します。単一の要素を配置できる場所であればどこにでも、複数の要素を配置するために使用できます。たとえば、コンポーネントは1つの要素しか返すことができませんが、Fragmentを使用することで複数の要素をグループ化し、グループとして返すことができます。

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Fragment は、DOM要素のような別のコンテナで要素をラップした場合とは異なり、Fragment で要素をグループ化してもレイアウトやスタイルに影響を与えないため便利です。ブラウザツールでこの例を検査すると、すべての <h1> および <article> DOMノードが、周囲にラッパーなしで兄弟として表示されます。

フォーク

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

詳細解説

特別な構文なしでFragmentを記述するには？（SVGアイコン）

上記の例は、ReactからFragmentをインポートするのと同じです。

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

通常、Fragmentにkeyを渡す必要がある場合を除いて、これは必要ありません。

複数の要素を変数に代入する（SVGアイコン）

他の要素と同様に、Fragment要素を変数に代入したり、propsとして渡したりすることができます。

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Are you sure you want to leave this page?
    </AlertDialog>
  );
}

テキストと要素をグループ化する（SVGアイコン）

Fragmentを使用して、テキストとコンポーネントをまとめてグループ化できます。

function DateRangePicker({ start, end }) {
  return (
    <>
      From
      <DatePicker date={start} />
      to
      <DatePicker date={end} />
    </>
  );
}

Fragmentのリストをレンダリングする（SVGアイコン）

<></>構文を使用する代わりに、Fragmentを明示的に記述する必要がある状況を次に示します。ループ内で複数の要素をレンダリングする場合は、各要素にkeyを割り当てる必要があります。ループ内の要素がFragmentである場合は、key属性を指定するために、通常のJSX要素構文を使用する必要があります。

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

Fragmentの子の周りにラッパー要素がないことを確認するために、DOMを検査できます。

フォーク

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

（ナビゲーションリンク：前へ - コンポーネント、次へ - <Profiler>）