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

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

• Опис
  • <Fragment>
• Використання
  • Повернення кількох елементів
  • Присвоєння змінній декількох елементів
  • Групування елементів з текстом
  • Відображення списку фрагментів

Опис

<Fragment>

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

Пропси

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

Обмеження

• Якщо ви хочете передати key для Fragment, ви не можете використовувати синтаксис <>...</>. Ви маєте явно імпортувати Fragment з 'react' та рендерити <Fragment key={yourKey}>...</Fragment>.

• React не буде скидати стан компонента коли ви переходите від рендерингу <><Child /></> до [<Child />] або назад, або коли ви переходите від рендерингу <><Child /></> до <Child /> і назад. Це може працювати лише на одному рівні вкладеності: наприклад, перехід від <><><Child /></></> до <Child /> скидає стан компонента. Дивіться точну семантику тут.

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

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

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

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

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

import { Fragment } from 'react';

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

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

Як і будь-який інший елемент, Fragment елементи можна присвоювати змінним, передавати їх як пропси тощо:

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Ви впевнені, що хочете залишити цю сторінку?
    </AlertDialog>
  );
}

Групування елементів з текстом

Ви можете використовувати Fragment, щоб групувати текст разом з компонентами:

function DateRangePicker({ start, end }) {
  return (
    <>
      Від
      <DatePicker date={start} />
      до
      <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, щоб переконатися, що дочірні компоненти Fragment нічим не обгортуються: