<Fragment> (<>...</>)

<Fragment> を使うことで、ラッパ用�?ノードを用いずに要素をグループ化することができます。通常は <>...</> という構文で使用されます。

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

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

リファレンス

`<Fragment>`

単一�?要素が必要な場面で、複数�?要素を <Fragment> でラップすることでグループ化することができます。Fragment で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときと同じです。空�? JSX タグ <></> は、ほとんど�?場合 <Fragment></Fragment> �?省略記法です。

props

省略可能 key: 明示的な <Fragment> 構文で�?�言されたフラグメントは key を持つことができます。

注意点

key をフラグメントに渡したい場合は、<>...</> 構文を使用することはできません。'react' から Fragment を明示的にインポートし、<Fragment key={yourKey}>...</Fragment> とレンダーしなければなりません。
React は、<><Child /></> と [<Child />] �?レンダー間、あるいは <><Child /></> と <Child /> �?レンダー間で行き来する場合に state をリセットしません。これは単一レベル�?深さ�?とき�?み�?動作です。例えば、<><><Child /></></> から <Child /> へ�?変更では state がリセットされます。具体的な振る舞い�?詳細はこちらを参照してください。

使用法

複数�?要素を返す

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

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

フラグメントが有用な�?は、DOM 要素�?ような他�?コンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。以下�?例をブラウザツールでインスペクト（inspect, 調査）してみると、すべて�? <h1> や <article> DOM ノードがラップされずに兄弟として表示されることがわかります。

Fork

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>
  );
}

さらに深く知る

特別な構文を使わずにフラグメントを記述する方法

上述�?例は、React から Fragment をインポートして以下�?ように書くことと同じです。

import { Fragment } from 'react';

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

Fragment に key を渡す場合以外では、通常必要ありません。

複数�?要素を変数に割り当てる

他�?要素と同じように、フラグメントも要素として変数に割り当てたり、props として渡したりすることができます：

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

テキストと要素をグループ化する

Fragment を使うとテキストとコンポーネントをグループ化することができます：

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

フラグメント�?リストをレンダーする

こちらは <></> 構文�?代わりに Fragment を明示的に記述する必要がある場面です。ループ内で複数�?要素をレンダーするときには、各要素に key を割り当てる必要があります。ループ内�?要素がフラグメント�?場合は、key 属性を渡すために通常�? JSX 要素�?構文を使用する必要があります。

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

DOM をインスペクトすると、フラグメント�?子要素�?まわりにラッパ要素がないことを確認できます。

Fork

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>
  );
}

Previousコンポーネント Next<Profiler>