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

<Fragment>, часто використовується у синтаксисі <>...</>, дозволяє групувати елементи без вузла обгортки.

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

Довідник

`<Fragment>`

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

Пропси

опціонально key: Фрагменти, оголошені з явним синтаксисом <Fragment>, можуть мати ключі .

Застереження

Якщо ви хочете передати ключ Фрагменту, ви не можете використовувати синтаксис <>...</>. Ви повинні явно імпортувати Fragment з 'react' і відрендерити <Fragment key={yourKey}>...</Fragment>.
React не скидає стан при переході від рендерингу <><Child /></> до [<Child />] або назад, чи при переході від рендерингу <><Child /></> до <Child /> і назад. Це працює лише на один рівень вглиб: наприклад, перехід від <><><Child /></></> до <Child /> скидає стан. Точну семантику дивіться тут.

Використання

Повернення декількох елементів

Використовуйте Fragment або еквівалентний синтаксис <>...</>, щоб згрупувати декілька елементів разом. Ви можете використовувати його для розміщення декількох елементів у будь-якому місці, куди може потрапити один елемент. Наприклад, компонент може повернути лише один елемент, але за допомогою фрагмента ви можете згрупувати декілька елементів разом, а потім повернути їх як групу:

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

Фрагменти корисні тим, що групування елементів за допомогою фрагмента не впливає на компонування або стилі, на відміну від того, якби ви загорнули елементи в інший контейнер, наприклад, DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, то побачите, що всі DOM-вузли <h1> і <article> відображаються як брати і сестри без обгорток навколо них:

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 з React:

import { Fragment } from 'react';

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

Зазвичай вам це не знадобиться, якщо тільки вам не потрібно буде передати ключ до вашого Fragment.

Присвоєння декількох елементів змінній

Як і будь-який інший елемент, елементи 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 замість того, щоб використовувати синтаксис <></>. Коли ви відображаєте декілька елементів у циклі , вам потрібно призначити ключ для кожного елемента. Якщо елементи всередині циклу є фрагментами, вам потрібно використовувати звичайний синтаксис елементів 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>
  );
}

[email protected]