Как использовать React Fragments?react-52

Question

Как использовать React Fragments?react-52

Answer 1

React Fragments позволяют группировать несколько JSX-элементов без добавления лишних DOM-узлов. Вот полное руководство по их применению в реальных проектах.

1. Базовое использование

Синтаксис с полным объявлением:

import React from 'react';

function TableRows() {
  return (
    <React.Fragment>
      <tr><td>Строка 1</td></tr>
      <tr><td>Строка 2</td></tr>
    </React.Fragment>
  );
}

Сокращённый синтаксис :

function ListItems() {
  return (
    <>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
    </>
  );
}

2. Использование с ключами

Фрагменты с ключами полезны при рендеринге списков:

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Важно: Сокращённый синтаксис <> </> не поддерживает атрибут key!

3. Комбинирование с условным рендерингом

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      {user.isAdmin && (
        <>
          <AdminControls />
          <AuditLog />
        </>
      )}
    </div>
  );
}

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

Без фрагментов это невозможно - JSX требует единого корневого элемента:

function Columns() {
  // Без Fragment пришлось бы использовать div, что может сломать вёрстку
  return (
    <>
      <td>Контент 1</td>
      <td>Контент 2</td>
    </>
  );
}

5. Оптимизация производительности

Пример с таблицей, где лишний div сломает структуру:

function DataTable({ data }) {
  return (
    <table>
      <tbody>
        {data.map(row => (
          // Без Fragment здесь появился бы лишний div!
          <React.Fragment key={row.id}>
            <tr><td>{row.name}</td></tr>
            <tr><td>{row.value}</td></tr>
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

6. Работа с рефами

Хотя фрагменты не создают DOM-узлов, их можно использовать с ref:

function FocusableGroup() {
  const ref = useRef();

  const focusFirst = () => {
    ref.current.querySelector('button').focus();
  };

  return (
    <div ref={ref}>
      <>
        <button onClick={focusFirst}>Кнопка 1</button>
        <button>Кнопка 2</button>
      </>
    </div>
  );
}

7. Ограничения и подводные камни

Стилизация: Фрагменты не принимают атрибуты className или style
Анимации: Нельзя анимировать фрагмент как контейнер
Пропсы: Принимают только атрибут key (в полной версии)

Альтернативы в особых случаях

Если нужна обёртка со стилями, используйте semantic-элементы:

function ArticleSections() {
  return (
    <article>  {/* Вместо Fragment когда нужна семантика */}
      <section>...</section>
      <section>...</section>
    </article>
  );
}

Резюмируем

React Fragments — это простой, но мощный инструмент для группировки элементов без лишних DOM-узлов. Используйте:

<> </> для простых случаев
<React.Fragment> когда нужны ключи
Избегайте при необходимости стилизации контейнера
Помните об ограничениях при работе с ref и анимациями