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

translate-react-bot[bot] · web-flow · commit 68c4230fe4f4 · 2026-05-18T16:29:55.000Z
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
@@ -1,12 +1,11 @@
 ---
 title: forwardRef
 ---
-
 <Deprecated>
 
-В React 19 `forwardRef` больше не нужен. Вместо этого передавайте `ref` как проп.
+В React 19 `forwardRef` больше не нужен. Вместо этого передавайте `ref` как пропс.
 
-`forwardRef` будет устаревшим в будущих релизах. Узнайте больше [здесь](/blog/2024/04/25/react-19#ref-as-a-prop).
+`forwardRef` будет устаревшим в будущем релизе. Узнайте больше [здесь](/blog/2024/04/25/react-19#ref-as-a-prop).
 
 </Deprecated>
 
@@ -42,11 +41,11 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 #### Параметры {/*parameters*/}
 
-* `render`: Функция рендеринга для вашего компонента. React вызывает эту функцию с `props` и `ref`, которые ваш компонент получил от родителя. JSX, который вы возвращаете, будет результатом вашего компонента.
+* `render`: Функция рендеринга для вашего компонента. React вызывает эту функцию с пропсами и `ref`, которые ваш компонент получил от родителя. Возвращаемый вами JSX будет результатом работы вашего компонента.
 
 #### Возвращает {/*returns*/}
 
-`forwardRef` возвращает React-компонент, который вы можете рендерить в JSX. В отличие от React-компонентов, определённых как обычные функции, компонент, возвращаемый `forwardRef`, также способен принимать проп `ref`.
+`forwardRef` возвращает React-компонент, который вы можете рендерить в JSX. В отличие от React-компонентов, определённых как обычные функции, компонент, возвращаемый `forwardRef`, также способен принимать пропс `ref`.
 
 #### Особенности {/*caveats*/}
 
@@ -78,15 +77,15 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 #### Возвращает {/*render-returns*/}
 
-`forwardRef` возвращает React-компонент, который вы можете рендерить в JSX. В отличие от React-компонентов, определённых как обычные функции, компонент, возвращаемый `forwardRef`, способен принимать проп `ref`.
+`forwardRef` возвращает React-компонент, который вы можете рендерить в JSX. В отличие от React-компонентов, определённых как обычные функции, компонент, возвращаемый `forwardRef`, способен принимать пропс `ref`.
 
 ---
 
 ## Использование {/*usage*/}
 
 ### Предоставление DOM-узла родительскому компоненту {/*exposing-a-dom-node-to-the-parent-component*/}
 
-По умолчанию DOM-узлы каждого компонента являются приватными. Однако иногда бывает полезно предоставить DOM-узел родительскому компоненту — например, чтобы позволить ему сфокусироваться на нём. Чтобы включить эту возможность, оберните определение вашего компонента в `forwardRef()`:
+По умолчанию DOM-узлы каждого компонента являются приватными. Однако иногда бывает полезно предоставить DOM-узел родителю — например, чтобы позволить ему сфокусироваться на нём. Чтобы включить эту возможность, оберните определение вашего компонента в `forwardRef()`:
 
 ```js {3,11}
 import { forwardRef } from 'react';
@@ -102,7 +101,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Вы получите <CodeStep step={1}>ref</CodeStep> как второй аргумент после props. Передайте его DOM-узлу, который вы хотите предоставить:
+Вы получите <CodeStep step={1}>ref</CodeStep> как второй аргумент после пропсов. Передайте его DOM-узлу, который вы хотите предоставить:
 
 ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
 import { forwardRef } from 'react';
@@ -139,15 +138,15 @@ function Form() {
 }
 ```
 
-Этот компонент `Form` [передаёт ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) в `MyInput`. Компонент `MyInput` *передаёт* этот ref в браузерный тег `<input>`. В результате компонент `Form` может получить доступ к этому DOM-узлу `<input>` и вызвать на нём [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+Этот компонент `Form` [передаёт ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) в `MyInput`. Компонент `MyInput` *перенаправляет* этот ref в браузерный тег `<input>`. В результате компонент `Form` может получить доступ к этому DOM-узлу `<input>` и вызвать на нём [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
 
-Имейте в виду, что предоставление ref к DOM-узлу внутри вашего компонента затрудняет изменение внутренних данных вашего компонента в будущем. Обычно вы предоставляете DOM-узлы из повторно используемых низкоуровневых компонентов, таких как кнопки или текстовые поля ввода, но не для компонентов уровня приложения, таких как аватар или комментарий.
+Имейте в виду, что предоставление ref к DOM-узлу внутри вашего компонента затрудняет изменение внутренних данных вашего компонента в будущем. Обычно вы будете предоставлять DOM-узлы из повторно используемых низкоуровневых компонентов, таких как кнопки или текстовые поля ввода, но не для компонентов уровня приложения, таких как аватар или комментарий.
 
-<Recipes titleText="Примеры передачи ref">
+<Recipes titleText="Примеры перенаправления ref">
 
 #### Фокусировка текстового поля ввода {/*focusing-a-text-input*/}
 
-Нажатие на кнопку сфокусирует поле ввода. Компонент `Form` определяет ref и передаёт его компоненту `MyInput`. Компонент `MyInput` передаёт этот ref браузерному `<input>`. Это позволяет компоненту `Form` сфокусироваться на `<input>`.
+Нажатие на кнопку сфокусирует поле ввода. Компонент `Form` определяет ref и передаёт его компоненту `MyInput`. Компонент `MyInput` перенаправляет этот ref в браузерное поле ввода `<input>`. Это позволяет компоненту `Form` сфокусироваться на `<input>`.
 
 <Sandpack>
 
@@ -201,7 +200,7 @@ input {
 
 #### Воспроизведение и пауза видео {/*playing-and-pausing-a-video*/}
 
-Нажатие на кнопку вызовет [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) и [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) на DOM-узле `<video>`. Компонент `App` определяет ref и передаёт его компоненту `MyVideoPlayer`. Компонент `MyVideoPlayer` передаёт этот ref браузерному узлу `<video>`. Это позволяет компоненту `App` воспроизводить и ставить на паузу `<video>`.
+Нажатие на кнопку вызовет [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) и [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) на DOM-узле `<video>`. Компонент `App` определяет ref и передаёт его компоненту `MyVideoPlayer`. Компонент `MyVideoPlayer` перенаправляет этот ref в браузерный узел `<video>`. Это позволяет компоненту `App` воспроизводить и ставить на паузу `<video>`.
 
 <Sandpack>
 
@@ -260,9 +259,9 @@ button { margin-bottom: 10px; margin-right: 10px; }
 
 ---
 
-### Передача ref через несколько компонентов {/*forwarding-a-ref-through-multiple-components*/}
+### Перенаправление ref через несколько компонентов {/*forwarding-a-ref-through-multiple-components*/}
 
-Вместо передачи `ref` к DOM-узлу, вы можете передать его своему собственному компоненту, такому как `MyInput`:
+Вместо перенаправления `ref` на DOM-узел, вы можете перенаправить его на собственный компонент, такой как `MyInput`:
 
 ```js {1,5}
 const FormField = forwardRef(function FormField(props, ref) {
@@ -276,7 +275,7 @@ const FormField = forwardRef(function FormField(props, ref) {
 });
 ```
 
-Если этот компонент `MyInput` передаёт ref своему `<input>`, то ref к `FormField` даст вам этот `<input>`:
+Если этот компонент `MyInput` перенаправляет ref на свой `<input>`, то ref на `FormField` даст вам этот `<input>`:
 
 ```js {2,5,10}
 function Form() {
@@ -297,7 +296,7 @@ function Form() {
 }
 ```
 
-Компонент `Form` определяет ref и передаёт его `FormField`. Компонент `FormField` передаёт этот ref в `MyInput`, который передаёт его браузерному DOM-узлу `<input>`. Таким образом `Form` получает доступ к этому DOM-узлу.
+Компонент `Form` определяет ref и передаёт его `FormField`. Компонент `FormField` перенаправляет этот ref в `MyInput`, который перенаправляет его в DOM-узел браузерного `<input>`. Таким образом `Form` получает доступ к этому DOM-узлу.
 
 
 <Sandpack>
@@ -377,7 +376,7 @@ input, button {
 
 ### Предоставление императивного обработчика вместо DOM-узла {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
 
-Вместо предоставления всего DOM-узла, вы можете предоставить пользовательский объект, называемый *императивным обработчиком (imperative handle)*, с более ограниченным набором методов. Для этого вам потребуется определить отдельный ref для хранения DOM-узла:
+Вместо предоставления всего DOM-узла, вы можете предоставить пользовательский объект, называемый *императивным обработчиком*, с более ограниченным набором методов. Для этого вам потребуется определить отдельный ref для хранения DOM-узла:
 
 ```js {2,6}
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -389,7 +388,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Передайте полученный `ref` в [`useImperativeHandle`](/reference/react/useImperativeHandle) и укажите значение, которое вы хотите предоставить `ref`:
+Передайте полученный `ref` в [`useImperativeHandle`](/reference/react/useImperativeHandle) и укажите значение, которое вы хотите предоставить для `ref`:
 
 ```js {6-15}
 import { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -412,7 +411,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Если какой-либо компонент получает ref к `MyInput`, он получит только ваш объект `{ focus, scrollIntoView }` вместо DOM-узла. Это позволяет вам ограничить информацию, которую вы предоставляете о вашем DOM-узле, до минимума.
+Если какой-либо компонент получит ref на `MyInput`, он получит только ваш объект `{ focus, scrollIntoView }` вместо DOM-узла. Это позволяет вам ограничить информацию, которую вы предоставляете о вашем DOM-узле, до минимума.
 
 <Sandpack>
 
@@ -471,25 +470,25 @@ input {
 
 </Sandpack>
 
-[Читайте больше об использовании императивных обработчиков.](/reference/react/useImperativeHandle)
+[Подробнее об использовании императивных обработчиков.](/reference/react/useImperativeHandle)
 
 <Pitfall>
 
 **Не злоупотребляйте refs.** Используйте refs только для *императивных* действий, которые вы не можете выразить через пропсы: например, прокрутка к узлу, фокусировка на узле, запуск анимации, выделение текста и т. д.
 
-**Если вы можете выразить что-то через пропсы, вам не следует использовать ref.** Например, вместо предоставления императивного обработчика вроде `{ open, close }` из компонента `Modal`, лучше принять `isOpen` как проп, например `<Modal isOpen={isOpen} />`. [Эффекты](/learn/synchronizing-with-effects) могут помочь вам предоставлять императивное поведение через пропсы.
+**Если вы можете выразить что-то через пропс, вам не следует использовать ref.** Например, вместо предоставления императивного обработчика вроде `{ open, close }` из компонента `Modal`, лучше принять `isOpen` как пропс, например `<Modal isOpen={isOpen} />`. [Эффекты](/learn/synchronizing-with-effects) могут помочь вам предоставлять императивные действия через пропсы.
 
 </Pitfall>
 
 ---
 
 ## Устранение неполадок {/*troubleshooting*/}
 
-### Мой компонент обёрнут в `forwardRef`, но `ref` для него всегда `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
+### Мой компонент обёрнут в `forwardRef`, но `ref` на него всегда `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
 
-Обычно это означает, что вы забыли использовать полученный `ref`.
+Обычно это означает, что вы забыли фактически использовать полученный `ref`.
 
-Например, этот компонент ничего не делает со своим `ref`:
+Например, этот компонент ничего не делает с `ref`:
 
 ```js {1}
 const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -502,7 +501,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-Чтобы исправить это, передайте `ref` в DOM-узел или другой компонент, который может принимать `ref`:
+Чтобы исправить это, передайте `ref` вниз к DOM-узлу или другому компоненту, который может принять ref:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -515,7 +514,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-`ref` для `MyInput` также может быть `null`, если некоторая логика является условной:
+`ref` на `MyInput` также может быть `null`, если некоторая логика является условной:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -528,7 +527,7 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
 });
 ```
 
-Если `showInput` равно `false`, то `ref` не будет передан ни одному узлу, и `ref` для `MyInput` останется пустым. Это особенно легко упустить, если условие скрыто внутри другого компонента, как `Panel` в этом примере:
+Если `showInput` равно `false`, то ref не будет перенаправлен ни к одному узлу, и ref на `MyInput` останется пустым. Это особенно легко упустить, если условие скрыто внутри другого компонента, как `Panel` в этом примере:
 
 ```js {5,7}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
