{"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>Мир</td>\n      </div>\n    );\n  }\n}
\n

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

\n
<table>\n  <tr>\n    <div>\n      <td>Привет</td>\n      <td>Мир</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>Мир</td>\n      </React.Fragment>    );\n  }\n}
\n

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

\n
<table>\n  <tr>\n    <td>Привет</td>\n    <td>Мир</td>\n  </tr>\n</table>
\n

Сокращённая запись

\n

Существует сокращённая запись объявления фрагментов. Она выглядит как пустые теги:

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <>        <td>Привет</td>\n        <td>Мир</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":[]}