docs: translate cloneElement.md to Русский

Author: translate-react-bot[bot]

src/content/reference/react/cloneElement.md

@@ -1,16 +1,15 @@
 ---
 title: cloneElement
 ---
-```
 <Pitfall>
 
-Использование `cloneElement` — нечастая практика, которая может привести к хрупкому коду. [См. распространенные альтернативы.](#alternatives)
+Использование `cloneElement` встречается редко и может привести к хрупкому коду. [См. альтернативы.](#alternatives)
 
 </Pitfall>
 
 <Intro>
 
-`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); // <Row title="Cabbage" isHighlighted={true}>Goodbye
 
 #### Параметры {/*parameters*/}
 
-* `element`: Аргумент `element` должен быть допустимым React-элементом. Например, это может быть JSX-узел, такой как `<Something />`, результат вызова [`createElement`](/reference/react/createElement) или результат другого вызова `cloneElement`.
+* `element`: Аргумент `element` должен быть валидным React-элементом. Например, это может быть JSX-узел вроде `<Something />`, результат вызова [`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` по-другому, поэтому он клонирует каждый дочерний элемент `<Row>`, который он получил, и добавляет дополнительный пропс `isHighlighted: true` или `isHighlighted: false`:
+Представьте компонент `List`, который рендерит свои [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) в виде списка выбираемых строк с кнопкой "Next", которая изменяет выбранную строку. Компоненту `List` нужно отображать выбранную `Row` по-другому, поэтому он клонирует каждый дочерний элемент `<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}
 <List>
@@ -118,7 +117,7 @@ export default function List({ children }) {
 </List>
 ```
 
-Клонируя свои дочерние элементы, `List` может передавать дополнительную информацию каждому `Row` внутри. Результат выглядит так:
+Клонируя свои дочерние элементы, `List` может передавать дополнительную информацию каждой `Row` внутри. Результат выглядит так:
 
 ```js {4,8,12}
 <List>
@@ -137,7 +136,7 @@ export default function List({ children }) {
 </List>
 ```
 
-Обратите внимание, как нажатие «Далее» обновляет состояние `List` и выделяет другую строку:
+Обратите внимание, как нажатие "Next" обновляет состояние `List` и выделяет другую строку:
 
 <Sandpack>
 
@@ -232,11 +231,11 @@ button {
 
 </Sandpack>
 
-Подводя итог, `List` клонировал элементы `<Row />`, которые он получил, и добавил к ним дополнительный пропс.
+Таким образом, `List` клонировал полученные элементы `<Row />` и добавил к ним дополнительный пропс.
 
 <Pitfall>
 
-Клонирование дочерних элементов затрудняет определение того, как данные проходят через ваше приложение. Попробуйте одну из [альтернатив.](#alternatives)
+Клонирование дочерних элементов затрудняет отслеживание потока данных в вашем приложении. Попробуйте [альтернативы.](#alternatives)
 
 </Pitfall>
 
@@ -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`, которая отображает `<Row>` с заданным значением `isHighlighted`:
+Render prop `renderItem` называется так потому, что это пропс, который определяет, как что-то рендерить. Например, вы можете передать реализацию `renderItem`, которая рендерит `<Row>` с заданным значением `isHighlighted`:
 
 ```js {3,7}
 <List
@@ -274,7 +273,7 @@ export default function List({ items, renderItem }) {
 />
 ```
 
-Конечный результат такой же, как и с `cloneElement`:
+Конечный результат тот же, что и с `cloneElement`:
 
 ```js {4,8,12}
 <List>
@@ -389,21 +388,21 @@ button {
 
 </Sandpack>
 
-Этот шаблон предпочтительнее `cloneElement`, потому что он более явный.
+Этот шаблон предпочтительнее `cloneElement`, так как он более явный.
 
 ---
 
 ### Передача данных через контекст {/*passing-data-through-context*/}
 
 Другой альтернативой `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 {
 
 </Sandpack>
 
-Этот подход особенно полезен, если вы хотите повторно использовать эту логику между разными компонентами.
-```
+Этот подход особенно полезен, если вы хотите повторно использовать эту логику между различными компонентами.