From eb9b146165560dbe8e1594e55053edc92d27288f 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:28:41 +0000
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20translate=20`manipulating-the-dom-w?=
=?UTF-8?q?ith-refs.md`=20to=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
---
.../learn/manipulating-the-dom-with-refs.md | 318 +++++-------------
1 file changed, 87 insertions(+), 231 deletions(-)
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 2053f936b3..2ebc862077 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
---
-title: 'Manipulating the DOM with Refs'
+title: 'Манипулирование DOM с помощью рефов'
---
-
+```html
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React автоматически обновляет [DOM](https://developer.mozilla.org/ru/docs/Web/API/Document_Object_Model/Introduction), чтобы соответствовать вашему рендер-выводу, поэтому вашим компонентам не часто потребуется манипулировать им. Однако иногда вам может потребоваться доступ к DOM-элементам, управляемым React, например, чтобы сфокусировать узел, прокрутить к нему или измерить его размер и положение. В React нет встроенного способа сделать это, поэтому вам понадобится *ref* для DOM-узла.
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- Как получить доступ к DOM-узлу, управляемому React, с помощью атрибута `ref`
+- Как атрибут `ref` JSX связан с хуком `useRef`
+- Как получить доступ к DOM-узлу другого компонента
+- В каких случаях безопасно изменять DOM, управляемый React
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## Получение ref к узлу {/*getting-a-ref-to-the-node*/}
-To access a DOM node managed by React, first, import the `useRef` Hook:
+Чтобы получить доступ к DOM-узлу, управляемому React, сначала импортируйте хук `useRef`:
```js
import { useRef } from 'react';
```
-Then, use it to declare a ref inside your component:
+Затем используйте его, чтобы объявить ref внутри вашего компонента:
```js
const myRef = useRef(null);
```
-Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
+Наконец, передайте свой ref в качестве атрибута `ref` в JSX-тег, для которого вы хотите получить DOM-узел:
```js
```
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `
`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+Хук `useRef` возвращает объект с одним свойством `current`. Изначально `myRef.current` будет равно `null`. Когда React создает DOM-узел для этого `
`, React поместит ссылку на этот узел в `myRef.current`. Затем вы можете получить доступ к этому DOM-узлу из ваших [обработчиков событий](/learn/responding-to-events) и использовать встроенные [API браузера](https://developer.mozilla.org/ru/docs/Web/API/Element), определенные в нем.
```js
-// You can use any browser APIs, for example:
+// Вы можете использовать любые API браузера, например:
myRef.current.scrollIntoView();
```
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### Пример: Фокусировка текстового ввода {/*example-focusing-a-text-input*/}
-In this example, clicking the button will focus the input:
+В этом примере нажатие кнопки сфокусирует ввод:
@@ -73,18 +73,18 @@ export default function Form() {
-To implement this:
+Чтобы реализовать это:
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as ``. This tells React to **put this ``'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `