translate file: Manipulating the DOM with Refs #889

Vo-one · 2023-05-28T09:53:53Z

Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.

FrMks

good

naknumberone · 2023-05-30T23:09:06Z

src/content/learn/manipulating-the-dom-with-refs.md


-To access a DOM node managed by React, first, import the `useRef` Hook:
+Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте `user` Крюк:


hook переводится на русский как "хук") в https://github.com/reactjs/ru.react.dev/blob/main/TRANSLATION.md указан общепринятый перевод

исправлено

titovmx · 2023-08-04T13:45:45Z

@Vo-one вы могли бы исправить конфликт в этой ветке?

titovmx

Привет! Спасибо за перевод! Есть ряд замечаний, в основном повторяющиеся:

ref/refs нужно переводить как реф/рефы, когда речь идет о термине React.
Имена переменных, хуков и компонентов не нужно переводить или менять.
Стоит перепроверить перевод термина hook/hooks.
Перевод примеров.
В переводе рекомендуется использовать букву Ё. Пожалуйста, проверьте места, в которых должна быть использована буква Ё с помощью пакета eyo.

titovmx · 2023-08-04T13:50:03Z

src/content/learn/manipulating-the-dom-with-refs.md

@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: 'Манипулирование DOM с помощью ссылок'


Suggested change

title: 'Манипулирование DOM с помощью ссылок'

title: 'Манипулирование DOM с помощью рефов'

по соглашению Refs (как один из механизмов, специфичных для React) переводим как рефы.
Следует исправить во всём переводе:
ref - реф
refs - рефы

titovmx · 2023-08-04T13:58:48Z

src/content/learn/manipulating-the-dom-with-refs.md

 ---

 <Intro>

-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/docs/Web/API/Document_Object_Model/Introduction ) в соответствии с вашими результатами рендеринга, так что вашим компонентам не нужно будет часто манипулировать ими. Однако иногда вам может понадобиться доступ к элементам DOM, управляемым React, например, чтобы сфокусировать узел, прокрутить до него или измерить его размер и положение. В React нет встроенного способа выполнить эти действия, поэтому вам понадобится * ссылка * на узел DOM.


Suggested change

React автоматически обновляет [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction ) в соответствии с вашими результатами рендеринга, так что вашим компонентам не нужно будет часто манипулировать ими. Однако иногда вам может понадобиться доступ к элементам DOM, управляемым React, например, чтобы сфокусировать узел, прокрутить до него или измерить его размер и положение. В React нет встроенного способа выполнить эти действия, поэтому вам понадобится * ссылка * на узел DOM.

React автоматически обновляет [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) в соответствии с результатами вашего рендера, так что ваши компоненты будут редко взаимодействовать с DOM-элементами. Однако иногда вам может понадобиться доступ к ним, например, чтобы сфокусировать узел, прокрутить до него или измерить его размер и положение. В React нет встроенного способа выполнить эти действия, поэтому вам понадобится *реф* на узел DOM.

"won't need to manipulate it" относится здесь к DOM. Предлагаю перефразировать, чтобы это было очевиднее для читателей. Что думаете насчёт такого варианта?

titovmx · 2023-08-04T13:59:45Z

src/content/learn/manipulating-the-dom-with-refs.md

- How to access another component's DOM node
- In which cases it's safe to modify the DOM managed by React
+- Как получить доступ к узлу DOM, управляемому React, с атрибутом `ref`
+- Как атрибут JSX `ref` соотносится с хук `use Reef`


Suggested change

- Как атрибут JSX `ref` соотносится с хук `use Reef`

- Как JSX-атрибут `ref` соотносится с хуком `useRef`

titovmx · 2023-08-04T14:08:50Z

src/content/learn/manipulating-the-dom-with-refs.md


-To access a DOM node managed by React, first, import the `useRef` Hook:
+Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте `user` Крюк:


Suggested change

Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте `user` Крюк:

Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте хук `useRef`:

здесь как раз остался Крюк, а еще useRef во многих местах превратился в нечто иное - хорошо бы проверить по всему переводу. Название функции useRef не должно меняться или переводиться.

titovmx · 2023-08-04T14:10:02Z

src/content/learn/manipulating-the-dom-with-refs.md


 ```js
 const myRef = useRef(null);
 ```

-Finally, pass it to the DOM node as the `ref` attribute:
+Наконец, передайте свой ref в качестве атрибута `ref` тегу JSX, для которого вы хотите получить узел DOM:


Suggested change

Наконец, передайте свой ref в качестве атрибута `ref` тегу JSX, для которого вы хотите получить узел DOM:

Наконец, передайте свой реф в качестве атрибута `ref` тегу JSX, для которого вы хотите получить узел DOM:

здесь переводим "ref" как "реф"

titovmx · 2023-08-04T15:46:05Z

src/content/learn/manipulating-the-dom-with-refs.md


 ```js
 setTodos([ ...todos, newTodo]);
 listRef.current.lastChild.scrollIntoView();
 ```

-In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+В React [state updates are queued.](/learn/queueing-a-series-of-state-updates) Обычно это то, чего вы хотите. Однако здесь это вызывает проблему, потому что "установить в dos` не сразу обновляет DOM. Таким образом, к тому времени, когда вы прокручиваете список до его последнего элемента, задача еще не была добавлена. Вот почему прокрутка всегда "отстает" на один элемент.


Suggested change

В React [state updates are queued.](/learn/queueing-a-series-of-state-updates) Обычно это то, чего вы хотите. Однако здесь это вызывает проблему, потому что "установить в dos` не сразу обновляет DOM. Таким образом, к тому времени, когда вы прокручиваете список до его последнего элемента, задача еще не была добавлена. Вот почему прокрутка всегда "отстает" на один элемент.

В React [обновления состояния помещаются в очередь.](/learn/queueing-a-series-of-state-updates) Обычно это то, чего вы хотите. Однако здесь это вызывает проблему, потому что `setTodos` не сразу обновляет DOM. Таким образом, к тому времени, когда вы прокручиваете список до его последнего элемента, задача еще не была добавлена. Вот почему прокрутка всегда "отстает" на один элемент.

titovmx · 2023-08-04T15:49:47Z

src/content/learn/manipulating-the-dom-with-refs.md


-Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+Судьи - это спасательный люк. Вы должны использовать их только тогда, когда вам нужно "выйти за пределы React". Распространенные примеры этого включают управление фокусом, положением прокрутки или вызов API-интерфейсов браузера, которые React не предоставляет.


Suggested change

Судьи - это спасательный люк. Вы должны использовать их только тогда, когда вам нужно "выйти за пределы React". Распространенные примеры этого включают управление фокусом, положением прокрутки или вызов API-интерфейсов браузера, которые React не предоставляет.

Рефы - это спасательный люк. Вы должны использовать их только тогда, когда вам нужно "выйти за пределы React". Распространенные примеры: управление фокусом, положение прокрутки или вызов методов API браузера, которые React не предоставляет.

titovmx · 2023-08-04T15:51:35Z

src/content/learn/manipulating-the-dom-with-refs.md


-If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+Если вы будете придерживаться неразрушающих действий, таких как фокусировка и прокрутка, у вас не должно возникнуть никаких проблем. Однако, если вы попытаетесь ** изменить ** DOM вручную, вы можете столкнуться с риском возникновения конфликта с изменениями, которые вносит React.


Suggested change

Если вы будете придерживаться неразрушающих действий, таких как фокусировка и прокрутка, у вас не должно возникнуть никаких проблем. Однако, если вы попытаетесь ** изменить ** DOM вручную, вы можете столкнуться с риском возникновения конфликта с изменениями, которые вносит React.

Если вы будете придерживаться действий без изменения DOM, таких как фокусировка и прокрутка, у вас не должно возникнуть никаких проблем. Однако, если вы попытаетесь **обновить** DOM вручную, вы можете столкнуться с риском возникновения конфликта с изменениями, которые вносит React.

titovmx · 2023-08-04T15:53:12Z

src/content/learn/manipulating-the-dom-with-refs.md


-To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+Чтобы проиллюстрировать эту проблему, в этом примере есть приветственное сообщение и две кнопки. Первая кнопка переключает свое присутствие, используя [conditional rendering](/learn/conditional-rendering) и [state](/learn/state-a-components-memory), как вы обычно делаете в React. Вторая кнопка использует [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove ), чтобы принудительно удалить его из DOM вне контроля React.


Suggested change

Чтобы проиллюстрировать эту проблему, в этом примере есть приветственное сообщение и две кнопки. Первая кнопка переключает свое присутствие, используя [conditional rendering](/learn/conditional-rendering) и [state](/learn/state-a-components-memory), как вы обычно делаете в React. Вторая кнопка использует [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove ), чтобы принудительно удалить его из DOM вне контроля React.

Чтобы проиллюстрировать эту проблему, в этом примере есть приветственное сообщение и две кнопки. Первая кнопка переключает свое присутствие, используя [условный рендеринг](/learn/conditional-rendering) и [состояние](/learn/state-a-components-memory), как вы обычно делаете в React. Вторая кнопка использует [`remove()` DOM API](https://developer.mozilla.org/ru/docs/Web/API/Element/remove), чтобы принудительно удалить его из DOM вне контроля React.

обновил ссылки

titovmx · 2023-08-04T15:54:44Z

src/content/learn/manipulating-the-dom-with-refs.md


-Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+Попробуйте нажать "Переключить с помощью setState" несколько раз. Сообщение должно исчезнуть и появиться снова. Затем нажмите "Удалить из DOM". Это приведет к его принудительному удалению. Наконец, нажмите "Переключить с помощью setState".:


Название кнопок стоит также перевести в примере ниже

titovmx

Привет! Спасибо за перевод! Есть ряд замечаний, в основном повторяющиеся:

ref/refs нужно переводить как реф/рефы, когда речь идет о термине React.
Имена переменных, хуков и компонентов не нужно переводить или менять.
Стоит перепроверить перевод термина hook/hooks.
Перевод примеров.
В переводе рекомендуется использовать букву Ё. Пожалуйста, проверьте места, в которых должна быть использована буква Ё с помощью пакета eyo.

translate file: Manipulating the DOM with Refs

3092957

vercel bot deployed to Preview – ru-react-dev May 28, 2023 09:55 View deployment

FrMks approved these changes May 28, 2023

View reviewed changes

Vo-one mentioned this pull request May 28, 2023

New Russian Translation Progress #843

Open

wwoffxx approved these changes May 28, 2023

View reviewed changes

naknumberone reviewed May 30, 2023

View reviewed changes

update translate

f3a786e

vercel bot deployed to Preview – ru-react-dev June 2, 2023 07:38 View deployment

titovmx requested changes Aug 4, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translate file: Manipulating the DOM with Refs #889

translate file: Manipulating the DOM with Refs #889

Vo-one commented May 28, 2023

FrMks left a comment

naknumberone May 30, 2023 •

edited

Vo-one Jun 2, 2023

titovmx commented Aug 4, 2023

titovmx left a comment

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx Aug 4, 2023

titovmx left a comment


		To access a DOM node managed by React, first, import the `useRef` Hook:
		Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте `user` Крюк:

	title: 'Манипулирование DOM с помощью ссылок'
	title: 'Манипулирование DOM с помощью рефов'

	- Как атрибут JSX `ref` соотносится с хук `use Reef`
	- Как JSX-атрибут `ref` соотносится с хуком `useRef`

	Наконец, передайте свой ref в качестве атрибута `ref` тегу JSX, для которого вы хотите получить узел DOM:
	Наконец, передайте свой реф в качестве атрибута `ref` тегу JSX, для которого вы хотите получить узел DOM:


		Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
		Судьи - это спасательный люк. Вы должны использовать их только тогда, когда вам нужно "выйти за пределы React". Распространенные примеры этого включают управление фокусом, положением прокрутки или вызов API-интерфейсов браузера, которые React не предоставляет.


		If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to modify the DOM manually, you can risk conflicting with the changes React is making.
		Если вы будете придерживаться неразрушающих действий, таких как фокусировка и прокрутка, у вас не должно возникнуть никаких проблем. Однако, если вы попытаетесь изменить DOM вручную, вы можете столкнуться с риском возникновения конфликта с изменениями, которые вносит React.


		To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
		Чтобы проиллюстрировать эту проблему, в этом примере есть приветственное сообщение и две кнопки. Первая кнопка переключает свое присутствие, используя [conditional rendering](/learn/conditional-rendering) и [state](/learn/state-a-components-memory), как вы обычно делаете в React. Вторая кнопка использует [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove ), чтобы принудительно удалить его из DOM вне контроля React.


		Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
		Попробуйте нажать "Переключить с помощью setState" несколько раз. Сообщение должно исчезнуть и появиться снова. Затем нажмите "Удалить из DOM". Это приведет к его принудительному удалению. Наконец, нажмите "Переключить с помощью setState".:

translate file: Manipulating the DOM with Refs #889

Are you sure you want to change the base?

translate file: Manipulating the DOM with Refs #889

Conversation

Vo-one commented May 28, 2023

FrMks left a comment

Choose a reason for hiding this comment

naknumberone May 30, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

titovmx commented Aug 4, 2023

titovmx left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

titovmx left a comment

Choose a reason for hiding this comment

naknumberone May 30, 2023 •

edited