diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index aa72b08a0b..41f55c9b1d 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, often used via `<>...` syntax, lets you group elements without a wrapper node. +``, или `<>...`, позволяет группировать элементы без тега-обертки. ```js <> @@ -19,29 +19,29 @@ title: (<>...) --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `` {/*fragment*/} -Wrap elements in `` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<>` is shorthand for `` in most cases. +Оберните элементы в `` для объединения их, когда вам нужен один элемент. Группировка элементов в `Fragment` не влияет на итоговый DOM; оно остаётся таким же, как если бы элементы не были сгруппированы. Пустой JSX-тег `<>` обычно является сокращением для ``. -#### Props {/*props*/} +#### Пропсы {/*props*/} -- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **необязательный** `key`: Фрагменты, объявленные с помощью явного синтаксиса ``, могут иметь [ключи.](/learn/rendering-lists#keeping-list-items-in-order-with-key) -#### Caveats {/*caveats*/} +#### Предостережения {/*caveats*/} -- If you want to pass `key` to a Fragment, you can't use the `<>...` syntax. You have to explicitly import `Fragment` from `'react'` and render `...`. +- Если вы хотите передать `key` фрагменту, то воспользоваться краткой формой `<>...` не выйдет. Вы должны явно импортировать `Fragment` из `'react'` и рендерить `...`. -- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React не [сбрасывает состояние](/learn/preserving-and-resetting-state) при переходе от рендеринга `<>` к `[]` или обратно, или при переходе от `<>` к `` или обратно. Это работает только на одном уровне вложенности: например, переход от `<><>` к `` сбрасывает состояние. Точную семантику можно посмотреть [здесь.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- -## Usage {/*usage*/} +## Применение {/*usage*/} -### Returning multiple elements {/*returning-multiple-elements*/} +### Возвращение нескольких элементов {/*returning-multiple-elements*/} -Use `Fragment`, or the equivalent `<>...` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group: +Используйте `Fragment` или `<>...`, чтобы сгруппировать несколько элементов. Вы можете применить его для размещения нескольких элементов в любом месте, где может находиться один элемент. Например, компонент может возвращать только один элемент, но с помощью `Fragment` можно сгруппировать несколько элементов вместе и затем вернуть их: ```js {3,6} function Post() { @@ -54,7 +54,7 @@ function Post() { } ``` -Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `
` DOM nodes appear as siblings without wrappers around them: +Фрагменты полезны тем, что группировка элементов с их помощью не влияет на макет или стили, в отличие от оборачивания элементов в другой контейнер, например, DOM-элемент. Изучив этот пример в браузере с помощью инструментов разработчика, вы увидите, что все DOM-узлы `

` и `
` отображаются рядом и без обёрток: @@ -62,8 +62,8 @@ Fragments are useful because grouping elements with a Fragment has no effect on export default function Blog() { return ( <> - - + + ) } @@ -94,9 +94,9 @@ function PostBody({ body }) { -#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Как написать фрагмент без специального синтаксиса? {/*how-to-write-a-fragment-without-the-special-syntax*/} -The example above is equivalent to importing `Fragment` from React: +Приведенный выше пример эквивалентен импорту `Fragment` из React: ```js {1,5,8} import { Fragment } from 'react'; @@ -111,15 +111,15 @@ function Post() { } ``` -Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments) +В большинстве случаев это не нужно, за исключением ситуаций, когда необходимо [передать фрагменту `key`.](#rendering-a-list-of-fragments) --- -### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/} +### Присвоение переменной нескольких элементов {/*assigning-multiple-elements-to-a-variable*/} -Like any other element, you can assign Fragment elements to variables, pass them as props, and so on: +Как и любой другой элемент, вы можете присваивать элементы `Fragment` переменным, передавать их в качестве пропсов и так далее: ```js function CloseDialog() { @@ -131,7 +131,7 @@ function CloseDialog() { ); return ( - Are you sure you want to leave this page? + Вы уверены, что хотите покинуть эту страницу? ); } @@ -139,17 +139,17 @@ function CloseDialog() { --- -### Grouping elements with text {/*grouping-elements-with-text*/} +### Группировка элементов с текстом {/*grouping-elements-with-text*/} -You can use `Fragment` to group text together with components: +Вы можете использовать `Fragment` для группировки текста вместе с компонентами: ```js function DateRangePicker({ start, end }) { return ( <> - From + С - to + до ); @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} +### Рендеринг списка фрагментов {/*rendering-a-list-of-fragments*/} -Here's a situation where you need to write `Fragment` explicitly instead of using the `<>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute: +Рассмотрим ситуацию, где вы должны использовать `Fragment`, а не его краткую форму `<>`. Когда вы [рендерите несколько элементов в цикле](/learn/rendering-lists), то каждому из них нужно присвоить `key`. Если элементы цикла являются фрагментами, то вам необходимо использовать стандартный синтаксис JSX-элементов, чтобы это сделать: ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: +Вы можете проверить DOM и убедиться, что дочерние элементы фрагмента ни во что не обернуты: @@ -181,8 +181,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the import { Fragment } from 'react'; const posts = [ - { id: 1, title: 'An update', body: "It's been a while since I posted..." }, - { id: 2, title: 'My new blog', body: 'I am starting a new blog!' } + { id: 1, title: 'Обновление', body: "Давненько я не писал..." }, + { id: 2, title: 'Мой новый блог', body: 'Я начинаю новый блог!' } ]; export default function Blog() {