Фрагменти

Повернення кількох елементів з компонента є поширеною практикою в React. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів в DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Також існує скорочений запис.

Мотивація

Повернення списку дочірніх елементів з компонента є поширеною практикою. Розглянемо приклад на React:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

<Columns /> повинен повернути кілька елементів <td>, щоб HTML вийшов валідним. Якщо використовувати div як батьківський елемент всередині методу render() компонента <Columns />, то HTML виявиться невалідним.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Привіт</td>
        <td>Світe</td>
      </div>
    );
  }
}

Результатом виводу <Table /> буде:

<table>
  <tr>
    <div>
      <td>Привіт</td>
      <td>Світe</td>
    </div>
  </tr>
</table>

Фрагменти вирішують цю проблему.

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

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Привіт</td>
        <td>Світe</td>
      </React.Fragment>    );
  }
}

Результатом буде правильний вивід <Table />:

<table>
  <tr>
    <td>Привіт</td>
    <td>Світe</td>
  </tr>
</table>

Скорочений запис

Існує скорочений запис оголошення фрагментів. Він виглядає як порожні теги:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Привіт</td>
        <td>Світe</td>
      </>    );
  }
}

Ви можете використовувати <></> так само, як і будь-який інший елемент, проте такий запис не підтримує ключі або атрибути.

Фрагменти з ключами

Фрагменти, які оголошені за допомогою <React.Fragment> можуть мати ключі. Наприклад, їх можна використовувати при створенні списку визначень, перетворивши колекцію в масив фрагментів.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Без атрибута `key`, React видасть попередження про його відсутність
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key — це єдиний атрибут, який можна передати у Fragment. В майбутньому планується додати підтримку додаткових атрибутів, наприклад, обробників подій.

Живий приклад

Новий синтаксис JSX фрагментів можна спробувати на CodePen.