diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..7c7b20955 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: Фрагменты permalink: docs/fragments.html --- -A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. +Возврат нескольких элементов из компонента является распространённой практикой в React. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet. +Также существует [сокращённая запись](#short-syntax), однако не все популярные инструменты поддерживают её. -## Motivation {#motivation} +## Мотивация {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +Возврат списка дочерних элементов из компонента – распространённая практика. Рассмотрим пример на React: ```jsx class Table extends React.Component { @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +`` должен вернуть несколько элементов ``, чтобы HTML получился валидным. Если использовать div как родительский элемент внутри метода `render()` компонента ``, то HTML окажется невалидным. ```jsx class Columns extends React.Component { @@ -53,7 +53,7 @@ class Columns extends React.Component { } ``` -results in a `` output of: +результатом вывода `
` будет: ```jsx
@@ -66,9 +66,9 @@ results in a `
` output of:
``` -Fragments solve this problem. +Фрагменты решают эту проблему. -## Usage {#usage} +## Использование {#usage} ```jsx{4,7} class Columns extends React.Component { @@ -83,7 +83,7 @@ class Columns extends React.Component { } ``` -which results in a correct `` output of: +результатом будет правильный вывод `
`: ```jsx
@@ -94,9 +94,9 @@ which results in a correct `
` output of:
``` -### Short Syntax {#short-syntax} +### Сокращённая запись {#short-syntax} -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +Существует сокращённая запись объявления фрагментов. Она выглядит как пустые теги: ```jsx{4,7} class Columns extends React.Component { @@ -111,20 +111,20 @@ class Columns extends React.Component { } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +Можно использовать `<>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты. -Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `` until the tooling catches up. +Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. -### Keyed Fragments {#keyed-fragments} +### Фрагменты с ключами {#keyed-fragments} -Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list: +Фрагменты, объявленные с помощью ``, могут иметь ключи. Например, их можно использовать при создании списка определений, преобразовав коллекцию в массив фрагментов. ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // Без указания атрибута `key`, React выдаст предупреждение об его отсутствии
{item.term}
{item.description}
@@ -135,8 +135,8 @@ function Glossary(props) { } ``` -`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. +`key` – это единственный атрибут, допустимый у `Fragment`. В будущем мы планируем добавить поддержку дополнительных атрибутов, например, обработчиков событий. -### Live Demo {#live-demo} +### Живой пример {#live-demo} -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Новый синтаксис JSX фрагментов можно попробовать на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). diff --git a/content/docs/nav.yml b/content/docs/nav.yml index ce5219f92..c545eb406 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -48,7 +48,7 @@ - id: forwarding-refs title: Forwarding Refs - id: fragments - title: Fragments + title: Фрагменты - id: higher-order-components title: Higher-Order Components - id: integrating-with-other-libraries