Фрагменти

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

<Fragment>

Повернення кількох елементів з компонента є поширеною практикою в 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 />: