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

<Fragment>,よく<>...</>の形式で使用されます。ラッパーノードを必要とせずに要素をグループ化してくれます。

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

リファレンス
- <Fragment>
Usage

リファレンス

`<Fragment>`

単一の要素が必要なときで複数の要素をまとめるために <Fragment> でラップします。Fragment で要素をまとめても、結果となる DOM には影響を与えません。要素がまとめられていないときと同じです。空の JSX タグ <></> は、ほとんどの場合 <Fragment></Fragment> のショートハンドです。

Props

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

注意点

key をフラグメントに渡したいなら、<>...</> の構文を使用することはできません。'react' から Fragment を明示的にインポートし、<Fragment key={yourKey}>...</Fragment> をレンダーする必要があります。
React は、<><Child /></> のレンダーから [<Child />] への変更、あるいはその逆、または <><Child /></> のレンダーから <Child /> への変更、その逆に移行するときに state をリセットしません。これは 1 つのレベルまでのみ機能します：例えば、<><><Child /></></> から <Child /> への変更は state をリセットします。詳細についてはこちらをご覧ください。

Usage

Returning multiple elements

Use Fragment, or the equivalent <>...</> syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:

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

Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you’ll see that all <h1> and <article> DOM nodes appear as siblings without wrappers around them:

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

さらに深く知る

How to write a Fragment without the special syntax?

The example above is equivalent to importing Fragment from React:

import { Fragment } from 'react';

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

Usually you won’t need this unless you need to pass a key to your Fragment.

Assigning multiple elements to a variable

Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:

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

Grouping elements with text

You can use Fragment to group text together with components:

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

Rendering a list of Fragments

Here’s a situation where you need to write Fragment explicitly instead of using the <></> syntax. When you render multiple elements in a loop, you need to assign a key to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the key attribute:

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

You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:

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

PreviousComponents Next<Profiler>