{"componentChunkName":"component---src-templates-docs-js","path":"/docs/fragments.html","result":{"data":{"markdownRemark":{"html":"

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

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

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

\n

Мотивація

\n

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

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

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

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

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

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

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

\n

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

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

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

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

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

\n

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

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

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

\n

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

\n

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

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

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

\n

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

\n

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

","frontmatter":{"title":"Фрагменти","next":null,"prev":null},"fields":{"path":"content/docs/fragments.md","slug":"docs/fragments.html"}}},"pageContext":{"slug":"docs/fragments.html"}},"staticQueryHashes":[]}