PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Какие пропсы у React.Fragment важны на практике и как их применять?

Компоненты

У React.Fragment ровно один практически значимый проп — key. Это принципиально: фрагмент не рендерит DOM-узел, поэтому вешать на него className, style или обработчики некуда.

key — единственный поддерживаемый проп

Нужен при рендере списка фрагментов, когда группа элементов повторяется:

{terms.map((t) => (
  <React.Fragment key={t.id}>
    <dt>{t.term}</dt>
    <dd>{t.definition}</dd>
  </React.Fragment>
))}

Короткая форма <>...</> атрибутов не принимает — как только нужен key, пишем полную запись <React.Fragment key={...}>. Это самое частое практическое применение.

Чего у Fragment нет

  • className/style — фрагмент не создаёт DOM-элемент; нужны стили — берите <div> или <span>.
  • Обработчики событий, ref, data-атрибуты — по той же причине.

Исторически обсуждался и был доступен children (как у любого компонента), но передавать его явно смысла нет.

Где применяется

  • Строки таблиц: вернуть несколько <td> без обёртки (обёртка сломала бы <tr>).
  • Пары <dt>/<dd>, группы <option>, куски layout, где обёртка ломает flex/grid.
  • Любой компонент, возвращающий несколько корневых элементов.

Коротко для собеседования

Единственный проп Fragment — key, и для него нужна полная форма <React.Fragment key={...}> (короткий <> пропсы не принимает). className, style, ref, обработчики недоступны — фрагмент не создаёт DOM-узел. Основное применение — списки групп элементов и разметка, где обёртка нежелательна (таблицы, dl, flex/grid).

Другие вопросы раздела