From 7b5e06a96f81754619458f0282bda6aeeed532f2 Mon Sep 17 00:00:00 2001 From: "translate-react-bot[bot]" <251169733+translate-react-bot[bot]@users.noreply.github.com> Date: Thu, 14 May 2026 15:36:00 +0000 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20translate=20`cloneElement.md`=20to?= =?UTF-8?q?=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/cloneElement.md | 106 ++++++++++---------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 6bcea51b05..62fcf82490 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -1,16 +1,16 @@ --- title: cloneElement --- - +``` -Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) +Использование `cloneElement` — нечастая практика, которая может привести к хрупкому коду. [См. распространенные альтернативы.](#alternatives) -`cloneElement` lets you create a new React element using another element as a starting point. +`cloneElement` позволяет создавать новый React-элемент, используя другой элемент в качестве отправной точки. ```js const clonedElement = cloneElement(element, props, ...children) @@ -22,11 +22,11 @@ const clonedElement = cloneElement(element, props, ...children) --- -## Reference {/*reference*/} +## Ссылка {/*reference*/} ### `cloneElement(element, props, ...children)` {/*cloneelement*/} -Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`: +Вызовите `cloneElement`, чтобы создать React-элемент на основе `element`, но с другими `props` и `children`: ```js import { cloneElement } from 'react'; @@ -43,42 +43,42 @@ const clonedElement = cloneElement( console.log(clonedElement); // Goodbye ``` -[See more examples below.](#usage) +[См. больше примеров ниже.](#usage) -#### Parameters {/*parameters*/} +#### Параметры {/*parameters*/} -* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like ``, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call. +* `element`: Аргумент `element` должен быть допустимым React-элементом. Например, это может быть JSX-узел, такой как ``, результат вызова [`createElement`](/reference/react/createElement) или результат другого вызова `cloneElement`. -* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones. +* `props`: Аргумент `props` должен быть либо объектом, либо `null`. Если вы передаете `null`, клонированный элемент сохранит все исходные `element.props`. В противном случае, для каждого пропса в объекте `props` возвращаемый элемент будет «предпочитать» значение из `props` значению из `element.props`. Остальные пропсы будут заполнены из исходных `element.props`. Если вы передаете `props.key` или `props.ref`, они заменят исходные. -* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved. +* **необязательный** `...children`: Ноль или более дочерних узлов. Они могут быть любыми React-узлами, включая React-элементы, строки, числа, [порталы](/reference/react-dom/createPortal), пустые узлы (`null`, `undefined`, `true` и `false`) и массивы React-узлов. Если вы не передаете никаких аргументов `...children`, исходный `element.props.children` будет сохранен. -#### Returns {/*returns*/} +#### Возвращает {/*returns*/} -`cloneElement` returns a React element object with a few properties: +`cloneElement` возвращает объект React-элемента с несколькими свойствами: -* `type`: Same as `element.type`. -* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed. -* `ref`: The original `element.ref`, unless it was overridden by `props.ref`. -* `key`: The original `element.key`, unless it was overridden by `props.key`. +* `type`: То же, что и `element.type`. +* `props`: Результат поверхностного слияния `element.props` с переопределяющими `props`, которые вы передали. +* `ref`: Исходный `element.ref`, если он не был переопределен `props.ref`. +* `key`: Исходный `element.key`, если он не был переопределен `props.key`. -Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it. +Обычно вы возвращаете элемент из своего компонента или делаете его дочерним элементом другого элемента. Хотя вы можете читать свойства элемента, лучше всего относиться к каждому элементу как к непрозрачному после его создания и только рендерить его. -#### Caveats {/*caveats*/} +#### Предостережения {/*caveats*/} -* Cloning an element **does not modify the original element.** +* Клонирование элемента **не изменяет исходный элемент.** -* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder. +* Вам следует **передавать дочерние элементы в качестве нескольких аргументов в `cloneElement`, только если они все статически известны,** например `cloneElement(element, null, child1, child2, child3)`. Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: `cloneElement(element, null, listItems)`. Это гарантирует, что React [предупредит вас об отсутствующих `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) для любых динамических списков. Для статических списков это не требуется, потому что они никогда не переупорядочиваются. -* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](#alternatives) instead.** +* `cloneElement` усложняет отслеживание потока данных, поэтому **попробуйте [альтернативы](#alternatives) вместо этого.** --- -## Usage {/*usage*/} +## Использование {/*usage*/} -### Overriding props of an element {/*overriding-props-of-an-element*/} +### Переопределение пропсов элемента {/*overriding-props-of-an-element*/} -To override the props of some React element, pass it to `cloneElement` with the props you want to override: +Чтобы переопределить пропсы некоторого React-элемента, передайте его в `cloneElement` с пропсами, которые вы хотите переопределить: ```js [[1, 5, ""], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]] import { cloneElement } from 'react'; @@ -90,11 +90,11 @@ const clonedElement = cloneElement( ); ``` -Here, the resulting cloned element will be ``. +Здесь результирующий клонированный элемент будет ``. -**Let's walk through an example to see when it's useful.** +**Давайте рассмотрим пример, чтобы увидеть, когда это полезно.** -Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop: +Представьте себе компонент `List`, который отображает свои [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) в виде списка выбираемых строк с кнопкой «Далее», которая изменяет, какая строка выбрана. Компоненту `List` необходимо отображать выбранный `Row` по-другому, поэтому он клонирует каждый дочерний элемент ``, который он получил, и добавляет дополнительный пропс `isHighlighted: true` или `isHighlighted: false`: ```js {6-8} export default function List({ children }) { @@ -108,7 +108,7 @@ export default function List({ children }) { )} ``` -Let's say the original JSX received by `List` looks like this: +Предположим, что исходный JSX, полученный `List`, выглядит так: ```js {2-4} @@ -118,7 +118,7 @@ Let's say the original JSX received by `List` looks like this: ``` -By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this: +Клонируя свои дочерние элементы, `List` может передавать дополнительную информацию каждому `Row` внутри. Результат выглядит так: ```js {4,8,12} @@ -137,7 +137,7 @@ By cloning its children, the `List` can pass extra information to every `Row` in ``` -Notice how pressing "Next" updates the state of the `List`, and highlights a different row: +Обратите внимание, как нажатие «Далее» обновляет состояние `List` и выделяет другую строку: @@ -232,21 +232,21 @@ button { -To summarize, the `List` cloned the `` elements it received and added an extra prop to them. +Подводя итог, `List` клонировал элементы ``, которые он получил, и добавил к ним дополнительный пропс. -Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives) +Клонирование дочерних элементов затрудняет определение того, как данные проходят через ваше приложение. Попробуйте одну из [альтернатив.](#alternatives) --- -## Alternatives {/*alternatives*/} +## Альтернативы {/*alternatives*/} -### Passing data with a render prop {/*passing-data-with-a-render-prop*/} +### Передача данных с помощью render prop {/*passing-data-with-a-render-prop*/} -Instead of using `cloneElement`, consider accepting a *render prop* like `renderItem`. Here, `List` receives `renderItem` as a prop. `List` calls `renderItem` for every item and passes `isHighlighted` as an argument: +Вместо использования `cloneElement` рассмотрите возможность принятия *render prop*, например `renderItem`. Здесь `List` получает `renderItem` в качестве пропса. `List` вызывает `renderItem` для каждого элемента и передает `isHighlighted` в качестве аргумента: ```js {1,7} export default function List({ items, renderItem }) { @@ -259,7 +259,7 @@ export default function List({ items, renderItem }) { })} ``` -The `renderItem` prop is called a "render prop" because it's a prop that specifies how to render something. For example, you can pass a `renderItem` implementation that renders a `` with the given `isHighlighted` value: +Пропс `renderItem` называется «render prop», потому что это пропс, который определяет, как что-то отображать. Например, вы можете передать реализацию `renderItem`, которая отображает `` с заданным значением `isHighlighted`: ```js {3,7} ``` -The end result is the same as with `cloneElement`: +Конечный результат такой же, как и с `cloneElement`: ```js {4,8,12} @@ -293,7 +293,7 @@ The end result is the same as with `cloneElement`: ``` -However, you can clearly trace where the `isHighlighted` value is coming from. +Однако вы можете четко отследить, откуда берется значение `isHighlighted`. @@ -389,22 +389,21 @@ button { -This pattern is preferred to `cloneElement` because it is more explicit. +Этот шаблон предпочтительнее `cloneElement`, потому что он более явный. --- -### Passing data through context {/*passing-data-through-context*/} - -Another alternative to `cloneElement` is to [pass data through context.](/learn/passing-data-deeply-with-context) +### Передача данных через контекст {/*passing-data-through-context*/} +Другой альтернативой `cloneElement` является [передача данных через контекст.](/learn/passing-data-deeply-with-context) -For example, you can call [`createContext`](/reference/react/createContext) to define a `HighlightContext`: +Например, вы можете вызвать [`createContext`](/reference/react/createContext), чтобы определить `HighlightContext`: ```js export const HighlightContext = createContext(false); ``` -Your `List` component can wrap every item it renders into a `HighlightContext` provider: +Ваш компонент `List` может обернуть каждый отображаемый им элемент в провайдер `HighlightContext`: ```js {8,10} export default function List({ items, renderItem }) { @@ -421,7 +420,7 @@ export default function List({ items, renderItem }) { })} ``` -With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context: +При таком подходе `Row` вообще не нужно получать пропс `isHighlighted`. Вместо этого он считывает контекст: ```js src/Row.js {2} export default function Row({ title }) { @@ -429,7 +428,7 @@ export default function Row({ title }) { // ... ``` -This allows the calling component to not know or worry about passing `isHighlighted` to ``: +Это позволяет вызывающему компоненту не знать и не беспокоиться о передаче `isHighlighted` в ``: ```js {4} ``` -Instead, `List` and `Row` coordinate the highlighting logic through context. +Вместо этого `List` и `Row` координируют логику выделения через контекст. @@ -550,13 +549,13 @@ button { -[Learn more about passing data through context.](/reference/react/useContext#passing-data-deeply-into-the-tree) +[Узнайте больше о передаче данных через контекст.](/reference/react/useContext#passing-data-deeply-into-the-tree) --- -### Extracting logic into a custom Hook {/*extracting-logic-into-a-custom-hook*/} +### Извлечение логики в пользовательский хук {/*extracting-logic-into-a-custom-hook*/} -Another approach you can try is to extract the "non-visual" logic into your own Hook, and use the information returned by your Hook to decide what to render. For example, you could write a `useList` custom Hook like this: +Другой подход, который вы можете попробовать, — это извлечь «невизуальную» логику в свой собственный хук и использовать информацию, возвращаемую вашим хуком, чтобы решить, что отображать. Например, вы можете написать пользовательский хук `useList` следующим образом: ```js import { useState } from 'react'; @@ -575,7 +574,7 @@ export default function useList(items) { } ``` -Then you could use it like this: +Тогда вы можете использовать его так: ```js {2,9,13} export default function App() { @@ -598,7 +597,7 @@ export default function App() { } ``` -The data flow is explicit, but the state is inside the `useList` custom Hook that you can use from any component: +Поток данных явный, но состояние находится внутри пользовательского хука `useList`, который вы можете использовать из любого компонента: @@ -691,4 +690,5 @@ button { -This approach is particularly useful if you want to reuse this logic between different components. +Этот подход особенно полезен, если вы хотите повторно использовать эту логику между разными компонентами. +``` \ No newline at end of file From 5b5aadaaaa2052e64cfa0f880c023c868917591d Mon Sep 17 00:00:00 2001 From: "translate-react-bot[bot]" <251169733+translate-react-bot[bot]@users.noreply.github.com> Date: Mon, 18 May 2026 16:29:17 +0000 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20translate=20`cloneElement.md`=20to?= =?UTF-8?q?=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/cloneElement.md | 66 ++++++++++----------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 62fcf82490..21e572fed0 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -1,16 +1,15 @@ --- title: cloneElement --- -``` -Использование `cloneElement` — нечастая практика, которая может привести к хрупкому коду. [См. распространенные альтернативы.](#alternatives) +Использование `cloneElement` встречается редко и может привести к хрупкому коду. [См. альтернативы.](#alternatives) -`cloneElement` позволяет создавать новый React-элемент, используя другой элемент в качестве отправной точки. +`cloneElement` позволяет создать новый React-элемент, используя другой элемент в качестве отправной точки. ```js const clonedElement = cloneElement(element, props, ...children) @@ -22,7 +21,7 @@ const clonedElement = cloneElement(element, props, ...children) --- -## Ссылка {/*reference*/} +## Справочник {/*reference*/} ### `cloneElement(element, props, ...children)` {/*cloneelement*/} @@ -47,30 +46,30 @@ console.log(clonedElement); // Goodbye #### Параметры {/*parameters*/} -* `element`: Аргумент `element` должен быть допустимым React-элементом. Например, это может быть JSX-узел, такой как ``, результат вызова [`createElement`](/reference/react/createElement) или результат другого вызова `cloneElement`. +* `element`: Аргумент `element` должен быть валидным React-элементом. Например, это может быть JSX-узел вроде ``, результат вызова [`createElement`](/reference/react/createElement) или результат другого вызова `cloneElement`. -* `props`: Аргумент `props` должен быть либо объектом, либо `null`. Если вы передаете `null`, клонированный элемент сохранит все исходные `element.props`. В противном случае, для каждого пропса в объекте `props` возвращаемый элемент будет «предпочитать» значение из `props` значению из `element.props`. Остальные пропсы будут заполнены из исходных `element.props`. Если вы передаете `props.key` или `props.ref`, они заменят исходные. +* `props`: Аргумент `props` должен быть объектом или `null`. Если вы передадите `null`, клонированный элемент сохранит все оригинальные `element.props`. В противном случае, для каждого свойства в объекте `props`, возвращаемый элемент будет «предпочитать» значение из `props` значению из `element.props`. Остальные свойства будут взяты из оригинального `element.props`. Если вы передадите `props.key` или `props.ref`, они заменят оригинальные. -* **необязательный** `...children`: Ноль или более дочерних узлов. Они могут быть любыми React-узлами, включая React-элементы, строки, числа, [порталы](/reference/react-dom/createPortal), пустые узлы (`null`, `undefined`, `true` и `false`) и массивы React-узлов. Если вы не передаете никаких аргументов `...children`, исходный `element.props.children` будет сохранен. +* **необязательный** `...children`: Ноль или более дочерних узлов. Это могут быть любые React-узлы, включая React-элементы, строки, числа, [порталы](/reference/react-dom/createPortal), пустые узлы (`null`, `undefined`, `true` и `false`) и массивы React-узлов. Если вы не передадите никаких аргументов `...children`, будут сохранены оригинальные `element.props.children`. -#### Возвращает {/*returns*/} +#### Возвращаемое значение {/*returns*/} `cloneElement` возвращает объект React-элемента с несколькими свойствами: * `type`: То же, что и `element.type`. -* `props`: Результат поверхностного слияния `element.props` с переопределяющими `props`, которые вы передали. -* `ref`: Исходный `element.ref`, если он не был переопределен `props.ref`. -* `key`: Исходный `element.key`, если он не был переопределен `props.key`. +* `props`: Результат поверхностного слияния `element.props` с переданными вами переопределяющими `props`. +* `ref`: Оригинальный `element.ref`, если он не был переопределен `props.ref`. +* `key`: Оригинальный `element.key`, если он не был переопределен `props.key`. -Обычно вы возвращаете элемент из своего компонента или делаете его дочерним элементом другого элемента. Хотя вы можете читать свойства элемента, лучше всего относиться к каждому элементу как к непрозрачному после его создания и только рендерить его. +Обычно вы возвращаете элемент из своего компонента или делаете его дочерним элементом другого элемента. Хотя вы можете читать свойства элемента, лучше всего рассматривать каждый элемент как непрозрачный после его создания и только рендерить его. -#### Предостережения {/*caveats*/} +#### Ограничения {/*caveats*/} -* Клонирование элемента **не изменяет исходный элемент.** +* Клонирование элемента **не изменяет оригинальный элемент.** -* Вам следует **передавать дочерние элементы в качестве нескольких аргументов в `cloneElement`, только если они все статически известны,** например `cloneElement(element, null, child1, child2, child3)`. Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: `cloneElement(element, null, listItems)`. Это гарантирует, что React [предупредит вас об отсутствующих `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) для любых динамических списков. Для статических списков это не требуется, потому что они никогда не переупорядочиваются. +* Вы должны **передавать дочерние элементы в качестве нескольких аргументов `cloneElement` только в том случае, если они все статически известны,** например `cloneElement(element, null, child1, child2, child3)`. Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: `cloneElement(element, null, listItems)`. Это гарантирует, что React [предупредит вас об отсутствующих `key`](/learn/rendering-lists#keeping-list-items-in-order-with-key) для любых динамических списков. Для статических списков это не требуется, так как они никогда не меняют порядок. -* `cloneElement` усложняет отслеживание потока данных, поэтому **попробуйте [альтернативы](#alternatives) вместо этого.** +* `cloneElement` затрудняет отслеживание потока данных, поэтому **попробуйте [альтернативы](#alternatives) вместо этого.** --- @@ -94,7 +93,7 @@ const clonedElement = cloneElement( **Давайте рассмотрим пример, чтобы увидеть, когда это полезно.** -Представьте себе компонент `List`, который отображает свои [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) в виде списка выбираемых строк с кнопкой «Далее», которая изменяет, какая строка выбрана. Компоненту `List` необходимо отображать выбранный `Row` по-другому, поэтому он клонирует каждый дочерний элемент ``, который он получил, и добавляет дополнительный пропс `isHighlighted: true` или `isHighlighted: false`: +Представьте компонент `List`, который рендерит свои [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) в виде списка выбираемых строк с кнопкой "Next", которая изменяет выбранную строку. Компоненту `List` нужно отображать выбранную `Row` по-другому, поэтому он клонирует каждый дочерний элемент ``, который он получил, и добавляет дополнительный пропс `isHighlighted: true` или `isHighlighted: false`: ```js {6-8} export default function List({ children }) { @@ -108,7 +107,7 @@ export default function List({ children }) { )} ``` -Предположим, что исходный JSX, полученный `List`, выглядит так: +Допустим, оригинальный JSX, полученный `List`, выглядит так: ```js {2-4} @@ -118,7 +117,7 @@ export default function List({ children }) { ``` -Клонируя свои дочерние элементы, `List` может передавать дополнительную информацию каждому `Row` внутри. Результат выглядит так: +Клонируя свои дочерние элементы, `List` может передавать дополнительную информацию каждой `Row` внутри. Результат выглядит так: ```js {4,8,12} @@ -137,7 +136,7 @@ export default function List({ children }) { ``` -Обратите внимание, как нажатие «Далее» обновляет состояние `List` и выделяет другую строку: +Обратите внимание, как нажатие "Next" обновляет состояние `List` и выделяет другую строку: @@ -232,11 +231,11 @@ button { -Подводя итог, `List` клонировал элементы ``, которые он получил, и добавил к ним дополнительный пропс. +Таким образом, `List` клонировал полученные элементы `` и добавил к ним дополнительный пропс. -Клонирование дочерних элементов затрудняет определение того, как данные проходят через ваше приложение. Попробуйте одну из [альтернатив.](#alternatives) +Клонирование дочерних элементов затрудняет отслеживание потока данных в вашем приложении. Попробуйте [альтернативы.](#alternatives) @@ -246,7 +245,7 @@ button { ### Передача данных с помощью render prop {/*passing-data-with-a-render-prop*/} -Вместо использования `cloneElement` рассмотрите возможность принятия *render prop*, например `renderItem`. Здесь `List` получает `renderItem` в качестве пропса. `List` вызывает `renderItem` для каждого элемента и передает `isHighlighted` в качестве аргумента: +Вместо использования `cloneElement` рассмотрите возможность принятия *render prop*, такого как `renderItem`. Здесь `List` принимает `renderItem` в качестве пропса. `List` вызывает `renderItem` для каждого элемента и передает `isHighlighted` в качестве аргумента: ```js {1,7} export default function List({ items, renderItem }) { @@ -259,7 +258,7 @@ export default function List({ items, renderItem }) { })} ``` -Пропс `renderItem` называется «render prop», потому что это пропс, который определяет, как что-то отображать. Например, вы можете передать реализацию `renderItem`, которая отображает `` с заданным значением `isHighlighted`: +Render prop `renderItem` называется так потому, что это пропс, который определяет, как что-то рендерить. Например, вы можете передать реализацию `renderItem`, которая рендерит `` с заданным значением `isHighlighted`: ```js {3,7} ``` -Конечный результат такой же, как и с `cloneElement`: +Конечный результат тот же, что и с `cloneElement`: ```js {4,8,12} @@ -389,7 +388,7 @@ button { -Этот шаблон предпочтительнее `cloneElement`, потому что он более явный. +Этот шаблон предпочтительнее `cloneElement`, так как он более явный. --- @@ -397,13 +396,13 @@ button { Другой альтернативой `cloneElement` является [передача данных через контекст.](/learn/passing-data-deeply-with-context) -Например, вы можете вызвать [`createContext`](/reference/react/createContext), чтобы определить `HighlightContext`: +Например, вы можете вызвать [`createContext`](/reference/react/createContext) для определения `HighlightContext`: ```js export const HighlightContext = createContext(false); ``` -Ваш компонент `List` может обернуть каждый отображаемый им элемент в провайдер `HighlightContext`: +Ваш компонент `List` может обернуть каждый элемент, который он рендерит, в провайдер `HighlightContext`: ```js {8,10} export default function List({ items, renderItem }) { @@ -420,7 +419,7 @@ export default function List({ items, renderItem }) { })} ``` -При таком подходе `Row` вообще не нужно получать пропс `isHighlighted`. Вместо этого он считывает контекст: +При таком подходе `Row` вообще не нужно получать пропс `isHighlighted`. Вместо этого он читает контекст: ```js src/Row.js {2} export default function Row({ title }) { @@ -553,9 +552,9 @@ button { --- -### Извлечение логики в пользовательский хук {/*extracting-logic-into-a-custom-hook*/} +### Выделение логики в пользовательский хук {/*extracting-logic-into-a-custom-hook*/} -Другой подход, который вы можете попробовать, — это извлечь «невизуальную» логику в свой собственный хук и использовать информацию, возвращаемую вашим хуком, чтобы решить, что отображать. Например, вы можете написать пользовательский хук `useList` следующим образом: +Другой подход, который вы можете попробовать, — это выделить "невизуальную" логику в собственный хук и использовать информацию, возвращаемую вашим хуком, для принятия решения о том, что рендерить. Например, вы можете написать пользовательский хук `useList` следующим образом: ```js import { useState } from 'react'; @@ -574,7 +573,7 @@ export default function useList(items) { } ``` -Тогда вы можете использовать его так: +Затем вы можете использовать его так: ```js {2,9,13} export default function App() { @@ -690,5 +689,4 @@ button { -Этот подход особенно полезен, если вы хотите повторно использовать эту логику между разными компонентами. -``` \ No newline at end of file +Этот подход особенно полезен, если вы хотите повторно использовать эту логику между различными компонентами. \ No newline at end of file