react fragment что это
3.10 Фрагменты
Общим примером в React является компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список потомков без добавления дополнительных узлов в DOM:
Существует и короткий синтаксис, но пока что его поддерживают не все популярные инструменты
3.10.1 Мотивация
Общим примером является компонент, который возвращает список дочерних элементов. Рассмотрим пример куска кода на React:
должен возвращать несколько элементов
Результирующий вывод компонента
И тут на помощь приходят фрагменты.
3.10.2 Использование
В следующем примере мы объявляем фрагмент:
который приводит к валидному выводу компонента
3.10.2.1 Короткий синтаксис
Существует новый, более короткий синтаксис, который можно использовать для объявления фрагментов. Он выглядит как пустые теги:
Вы можете использовать синтаксис <> таким же образом, как и любой другой элемент, за исключением того, что он не поддерживает ключи и атрибуты.
Обратите внимание, что многие инструменты его еще не поддерживают, поэтому вам пока остается явно писать и ожидать обновлений.
3.10.2.2 Фрагменты с ключами
3.10.3 Демо
Вы можете попробовать новый JSX синтаксис фрагментов с помощью данного CodePen.
Фрагменты в React
При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно использовать компоненты, организованные в визуальной галерее, не так ли?
Постановка задачи
Попробуйте визуализировать несколько компонентов React подобным образом:
или создать подобный список узлов:
При использовании VS Code с расширениями поддержки JSX, появится предупреждение: “Родительские выражения JSX должны иметь один родительский элемент”.
Чтобы предупреждение исчезло, нужно добавить дополнительный тег div в качестве родительского элемента в разметку JSX.
Проблема заключается в том, что использовать теги div немного неудобно. В HTML встречаются случаи, когда дополнительный div может деструктурировать DOM. Например, при использовании таблицы в компонентах.
Нам нужно визуализировать данные пользователей в табличной форме с помощью HTML-элемента table. Нужно визуализировать следующий код в React:
Создадим компоненты для визуализации каждого аспекта элемента table. HeaderComponent отобразит заголовок таблицы, BodyComponent — тело таблицы. TableComponent визуализирует каркас таблицы с HeaderComponent и BodyComponent таким образом:
HeaderComponent должен выглядеть так:
А BodyComponent выглядит вот так:
Проблема с HeaderComponent и BodyComponent заключается в том, что они выполняют возврат нескольких узлов. React предупредит о необходимости вложить разметку во вложенный тег.
Затем выполняем подобные действия, чтобы устранить предупреждение:
Разметка вложена в тег div. Теперь на выходе компонент Table будет выглядеть так:
Выше приведен неправильный вывод элемента table. Элемент div не должен быть отображен. Компоненты React предназначены для возврата элементов, но они должны быть заключены в родительский тег, несколько элементов не могут быть возвращены. Однако добавление дополнительного узла иногда приводит к неправильному форматированию html-элемента output, как показано выше.
Как решить эту проблему? Каким образом можно возвратить заключенные элементы JSX, не влияя на визуализированный вывод в DOM?
Фрагменты React способны решить эту проблему!
Решение — Фрагменты
С помощью фрагментов можно сгруппировать список дочерних элементов без добавления дополнительных узлов в DOM.
Приступим к решению первой проблемы:
Теперь выполним вложение:
Перейдем ко второму примеру:
Удаляем теги div и добавляем React.Fragment вместо них:
Переходим к третьему примеру и заменяем дополнительные теги div в BodyComponent и HeaderComponent на React.Fragment:
Таблица будет отображена следующим образом:
Фрагменты в React
Feb 19, 2019 · 4 min read
При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно использовать компоненты, организованные в визуальной галерее, не так ли?
Постановка задачи
Попробуйте визуализировать несколько компонентов React подобным образом:
или создать подобный список узлов:
При использовании VS Code с расширениями поддержки JSX, появится предупреждение: “Родительские выражения JSX должны иметь один родительский элемент”.
Чтобы предупреждение исчезло, нужно добавить дополнительный тег div в качестве родительского элемента в разметку JSX.
Проблема заключается в том, что использовать теги div немного неудобно. В HTML встречаются случаи, когда дополнительный div может деструктурировать DOM. Например, при использовании таблицы в компонентах.
Нам нужно визуализировать данные пользователей в табличной форме с помощью HTML-элемента table. Нужно визуализировать следующий код в React:
Создадим компоненты для визуализации каждого аспекта элемента table. HeaderComponent отобразит заголовок таблицы, BodyComponent — тело таблицы. TableComponent визуализирует каркас таблицы с HeaderComponent и BodyComponent таким образом:
HeaderComponent должен выглядеть так:
А BodyComponent выглядит вот так:
Проблема с HeaderComponent и BodyComponent заключается в том, что они выполняют возврат нескольких узлов. React предупредит о необходимости вложить разметку во вложенный тег.
Затем выполняем подобные действия, чтобы устранить предупреждение:
Разметка вложена в тег div. Теперь на выходе компонент Table будет выглядеть так:
Выше приведен неправильный вывод элемента table. Элемент div не должен быть отображен. Компоненты React предназначены для возврата элементов, но они должны быть заключены в родительский тег, несколько элементов не могут быть возвращены. Однако добавление дополнительного узла иногда приводит к неправильному форматированию html-элемента output, как показано выше.
Как решить эту проблему? Каким образом можно возвратить заключенные элементы JSX, не влияя на визуализированный вывод в DOM?
Фрагменты React способны решить эту проблему!
Решение — Фрагменты
С помощью фрагментов можно сгруппировать список дочерних элементов без добавления дополнительных узлов в DOM.
Приступим к решению первой проблемы:
Теперь выполним вложение:
Перейдем ко второму примеру:
Удаляем теги div и добавляем React.Fragment вместо них:
Переходим к третьему примеру и заменяем дополнительные теги div в BodyComponent и HeaderComponent на React.Fragment:
Таблица будет отображена следующим образом:
React v16.2.0: улучшенная поддержка фрагментов
Ноябрь 28, 2017 Клемент Хонг
React 16.2 теперь доступен! Самым большим дополнением является улучшенная поддержка возврата нескольких дочерних элементов из метода отрисовки(рендеринга) компонента. Мы называем эту возможность фрагментами.
Фрагменты выглядят как пустые теги JSX. Они позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM:
Эта потрясающая новая функция стала возможной благодаря дополнениям как к React, так и к JSX.
Что такое фрагменты?
Общим примером является компонент, который возвращает список дочерних элементов. Рассмотрим данный пример HTML:
До версии 16 единственным способом достичь этого в React было обертывание потомков в дополнительный элемент, обычно div или span :
Чтобы устранить это ограничение, в React 16.0 была добавлена поддержка возврата массива элементов из метода отрисовки компонента. Вместо того, чтобы обертывать дочерние элементы в элемент DOM, вы можете поместить их в массив:
Однако такой подход имеет некоторые значительные отличия от обычного JSX:
Вы можете использовать так же, как используете любой другой элемент, не изменяя способ написания JSX. Никаких запятых, никаких ключей, никаких кавычек.
Компонент Fragment доступен в главном объекте React :
JSX синтаксис фрагментов
В React это является синтаксическим сахаром для элемента из примера в предыдущем разделе. (Не-React фреймворки, которые используют JSX, могут компилировать во что-то другое).
Синтаксис фрагментов в JSX был вдохновлен изящным предшественником, таким как конструктор XMLList() <> в E4X. Использование пары пустых тегов предназначено для того, чтобы обозначить, что в DOM не будет добавлено реального элемента.
Фрагменты с ключами
Поддержка синтаксиса фрагментов
Поддержка синтаксиса фрагментов в JSX будет зависеть от инструментов, которые вы используете для построения своего приложения. Пожалуйста, будьте терпеливы, поскольку сообщество JSX работает над принятием нового синтаксиса. Мы тесно сотрудничаем с разработчиками самых популярных проектов:
Create React App
Экспериментальная поддержка синтаксиса фрагментов будет добавлена в приложение Create React. Устойчивый выпуск может занять немного больше времени, так как мы ожидаем одобрения другими проектами.
Babel
Поддержка фрагментов JSX доступна в Babel v7.0.0-beta и выше! Если вы уже на Babel 7, просто обновите последнюю версию Babel и плагина преобразования:
Или, если вы используете react-present :
Обратите внимание, что Babel 7 технически все еще в бета-версии, но стабильный релиз уже скоро.
К сожалению отсутствует поддержка для Babel 6.x, и в настоящее время нет планов по обратной совместимости.
Babel с Webpack
Если вы используете Babel с Webpack, дополнительных шагов не требуется, потому что babel-loader будет использовать установленную вами версию Babel.
Babel c другими фреймворками
TypeScript
TypeScript имеет полную поддержку синтаксиса фрагментов! Обновитесь до версии 2.6.2. (Обратите внимание, что это важно, даже если вы уже на версии 2.6.1, так как поддержка была добавлена как релиз патча в 2.6.2.)
Проведите апгрейд до последнего TypeScript с помощью команды:
чтобы обновить Flow до последней версии.
Prettier
ESLint
JSX фрагменты поддерживаются ESLint 3.x, когда он используются вместе с babel-eslint :
или если он у вас уже есть, то сделайте апгрейд:
Обратите внимание, что babel-eslint официально не поддерживается ESLint. Мы рассмотрим возможность добавления фрагментов к ESLint 4.x в ближайшие недели (см. issue #9662 ).
Поддержка редактором
Может потребоваться некоторое время для поддержки синтаксиса фрагментов в текстовом редакторе. Будьте терпеливы, поскольку сообщество работает над принятием последних изменений. Тем временем вы можете увидеть ошибки или некорректную подсветку, если ваш редактор еще не поддерживает синтаксис фрагментов. Как правило, эти ошибки можно безопасно игнорировать.
Поддержка синтаксиса TypeScript редактором
Другие инструменты
Для других инструментов ознакомьтесь с соответствующей документацией, чтобы проверить наличие поддержки. Однако, если вы заблокированы своей инструментальной базой, вы всегда можете начать с использования компонента и позже выполнить codemod, чтобы заменить его сокращенным синтаксисом, когда соответствующая поддержка будет доступна.
Установка
React v16.2.0 доступен в реестре npm.
Чтобы установить React 16, запустите:
Мы также предоставляем сборки UMD React-а через CDN:
Лог изменений
React
React-DOM
React Test Renderer
React Reconciler
Внутренние изменения
Многие тесты были переписаны в отличие от публичного API. Большое спасибо всем, кто внес свой вклад!
Благодарности
Этот выпуск стал возможным благодаря нашим open source участникам. Большое спасибо всем, кто создавал issue, внес свой вклад в обсуждениях синтаксиса, проверял PR-ы, добавил поддержку фрагментов JSX в сторонние библиотеки и многое другое!
Особая благодарность командам TypeScript и Flow, а также команде сопровождения Babel, которые помогли реализовать инструментальную поддержку нового синтаксиса.
Благодарим Gajus Kuizinas и других участников, которые прототипировали компонент Fragment в open source.
React v16.2.0: Improved Support for Fragments
React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:
Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM:
This exciting new feature is made possible by additions to both React and JSX.
What Are Fragments?
A common pattern is for a component to return a list of children. Take this example HTML:
Prior to version 16, the only way to achieve this in React was by wrapping the children in an extra element, usually a div or span :
To address this limitation, React 16.0 added support for returning an array of elements from a component’s render method. Instead of wrapping the children in a DOM element, you can put them into an array:
However, this has some confusing differences from normal JSX:
To provide a more consistent authoring experience for fragments, React now provides a first-class Fragment component that can be used in place of arrays.
You can use the same way you’d use any other element, without changing the way you write JSX. No commas, no keys, no quotes.
The Fragment component is available on the main React object:
JSX Fragment Syntax
Fragments are a common pattern in our codebases at Facebook. We anticipate they’ll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we’re adding syntactical support for fragments to JSX:
In React, this desugars to a element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)
Fragment syntax in JSX was inspired by prior art such as the XMLList() <> constructor in E4X. Using a pair of empty tags is meant to represent the idea it won’t add an actual element to the DOM.
Note that the <> syntax does not accept attributes, including keys.
If you need a keyed fragment, you can use directly. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:
You can experiment with JSX fragment syntax with this CodePen.
Support for Fragment Syntax
Support for fragment syntax in JSX will vary depending on the tools you use to build your app. Please be patient as the JSX community works to adopt the new syntax. We’ve been working closely with maintainers of the most popular projects:
Experimental support for fragment syntax will be added to Create React App within the next few days. A stable release may take a bit longer as we await adoption by upstream projects.
Support for JSX fragments is available in Babel v7.0.0-beta.31 and above! If you are already on Babel 7, simply update to the latest Babel and plugin transform:
Or if you are using the react preset:
Note that Babel 7 is technically still in beta, but a stable release is coming soon.
Unfortunately, support for Babel 6.x is not available, and there are currently no plans to backport.
Babel with Webpack (babel-loader)
If you are using Babel with Webpack, no additional steps are needed because babel-loader will use your peer-installed version of Babel.
Babel with Other Frameworks
If you use JSX with a non-React framework like Inferno or Preact, there is a pragma option available in babel-plugin-transform-react-jsx that configures the Babel compiler to de-sugar the <> syntax to a custom identifier.
TypeScript has full support for fragment syntax! Please upgrade to version 2.6.2. (Note that this is important even if you are already on version 2.6.1, since support was added as patch release in 2.6.2.)
Upgrade to the latest TypeScript with the command:
Flow support for JSX fragments is available starting in version 0.59! Simply run
to update Flow to the latest version.
Prettier added support for fragments in their 1.9 release.
JSX Fragments are supported by ESLint 3.x when it is used together with babel-eslint:
or if you already have it, then upgrade:
Note that babel-eslint is not officially supported by ESLint. We’ll be looking into adding support for fragments to ESLint 4.x itself in the coming weeks (see issue #9662).
It may take a while for fragment syntax to be supported in your text editor. Please be patient as the community works to adopt the latest changes. In the meantime, you may see errors or inconsistent highlighting if your editor does not yet support fragment syntax. Generally, these errors can be safely ignored.
TypeScript Editor Support
If you’re a TypeScript user — great news! Editor support for JSX fragments is already available in Visual Studio 2015, Visual Studio 2017, Visual Studio Code and Sublime Text via Package Control.
For other tools, please check with the corresponding documentation to check if there is support available. However, if you’re blocked by your tooling, you can always start with using the component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available.
React v16.2.0 is available on the npm registry.
To install React 16 with Yarn, run:
To install React 16 with npm, run:
We also provide UMD builds of React via a CDN: