Какие пропсы у 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).