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

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

• Ссылка
  • <Fragment>
• Использование
  • Возвращение нескольких элементов
  • Присваивание нескольких элементов переменной
  • Группировка элементов с текстом
  • Отрисовка списка фрагментов

Ссылка

<Fragment>

Оборачивайте элементы в <Fragment> для их группировки в ситуациях, когда вам нужен один элемент. Группировка элементов в Fragment не влияет на итоговый DOM; это то же самое, как если бы элементы не были сгруппированы. Пустой тег JSX <></> является сокращением для <Fragment></Fragment> в большинстве случаев.

Свойства

• необязательное key: Фрагменты, объявленные с явным синтаксисом <Fragment>, могут иметь ключи.

Ограничения

• Если вы хотите передать key фрагменту, вы не можете использовать синтаксис <>...</>. Вам нужно явно импортировать Fragment из 'react' и отображать <Fragment key={yourKey}>...</Fragment>.

• React не сбрасывает состояние, когда вы переключаетесь с отображения <><Child /></> на [<Child />] или обратно, или когда вы переключаетесь с отображения <><Child /></> на <Child /> и обратно. Это работает только на одном уровне вглубь: например, переход от <><><Child /></></> к <Child /> сбрасывает состояние. См. точные семантики здесь.

Использование

Возвращение нескольких элементов

Используйте Fragment, или эквивалентный синтаксис <>...</>, чтобы сгруппировать несколько элементов вместе. Вы можете использовать его для размещения нескольких элементов в любом месте, где может быть один элемент. Например, компонент может возвращать только один элемент, но с помощью фрагмента вы можете сгруппировать несколько элементов и затем вернуть их как группу:

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

Фрагменты полезны, потому что группировка элементов с помощью фрагмента не влияет на макет или стили, в отличие от того, если вы обернули элементы в другой контейнер, например, DOM-элемент. Если вы просмотрите этот пример с помощью инструментов браузера, вы увидите, что все <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>
  );
}

import { Fragment } from 'react';

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

Присваивание нескольких элементов переменной

Как и любой другой элемент, вы можете присваивать фрагменты элементов переменным, передавать их как свойства и т. д.:

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 каждому элементу. Если элементы внутри цикла являются фрагментами, вам нужно использовать обычный синтаксис JSX для задания атрибута key:

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </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>
  );
}