From 72a4231d411c5b57940876802000af50ef001df8 Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Wed, 6 Mar 2019 17:46:17 +0300 Subject: [PATCH 01/56] Add major part of the translation --- content/docs/refs-and-the-dom.md | 80 ++++++++++++++++---------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9b56fcc9f..313f5f84f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -1,6 +1,6 @@ --- id: refs-and-the-dom -title: Refs and the DOM +title: Рефы и DOM redirect_from: - "docs/working-with-the-browser.html" - "docs/more-about-refs.html" @@ -11,33 +11,33 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Refs provide a way to access DOM nodes or React elements created in the render method. +Рефы дают возможность получить доступ к DOM-узлам или React-элементам, созданным в методе `render`. -In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. +В обычном потоке данных React родительские компоненты могут взаимодействовать с дочерними только через [пропсы](/docs/components-and-props.html). Чтобы модифицировать потомка, вы должны заново отрендерить его с новыми пропсами. Тем не менее, могут возникать ситуации, когда вам требуется императивно изменить дочерний элемент вопреки обычному потоку данных. Подлежащий изменениям дочерний элемент может быть как React компонентом, так и DOM элементом. В обоих случаях, React предоставляет спасательный круг (обходное решение). -### When to Use Refs {#when-to-use-refs} +### Когда Использовать Рефы {#when-to-use-refs} -There are a few good use cases for refs: +Cитуации, в которых использования рефов является оправданным: -* Managing focus, text selection, or media playback. -* Triggering imperative animations. -* Integrating with third-party DOM libraries. +* Управление фокусом, выделение текста или воспроизведение медиа. +* Императивный вызов анимаций. +* Интеграция со сторонними DOM библиотеками. -Avoid using refs for anything that can be done declaratively. +Избегайте использования рефов в ситуациях, когда задачу можно решить декларативным методом. -For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it. +Например, вместо того чтобы предоставлять `open()` и `close()` методы для компонента `Dialog`, передавайте ему проп `isOpen`. -### Don't Overuse Refs {#dont-overuse-refs} +### Не Злоупотребляйте Рефами {#dont-overuse-refs} -Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this. +Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно, чтобы в вашем приложении “что-то произошло”. Если у вас сложилось такое впечатление, сделайте паузу и задумайтесь, где должно поддерживаться состояние в компонентной иерархии. Зачастую является очевидным, что правильным местом для “хранения” состояния является верхний уровень в иерархии. Подробнее об этом в главе [Подъём состояния](/docs/lifting-state-up.html). -> Note +> Заметка > -> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs) instead. +> Приведённые ниже примеры были обновлены с использованием `React.createRef()` API представленном в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). -### Creating Refs {#creating-refs} +### Создание Рефов {#creating-refs} -Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component. +Рефы создаются с помощью `React.createRef()` и прикрепляются к React элементам через `ref` атрибут. Обычно рефы присваиваются свойству экземпляра класса в конструкторе, чтобы на них можно ссылаться из любой части компонента. ```javascript{4,7} class MyComponent extends React.Component { @@ -51,38 +51,38 @@ class MyComponent extends React.Component { } ``` -### Accessing Refs {#accessing-refs} +### Доступ к Рефам {#accessing-refs} -When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current` attribute of the ref. +Когда реф передается элементу в методе `render`, ссылка на данный узел становится доступной через атрибут `current` в рефе. ```javascript const node = this.myRef.current; ``` -The value of the ref differs depending on the type of the node: +Значение рефа отличается в зависимости от типа узла: -- When the `ref` attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()` receives the underlying DOM element as its `current` property. -- When the `ref` attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`. -- **You may not use the `ref` attribute on function components** because they don't have instances. +- Когда `ref` атрибут используется с HTML элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM элемент. +- Когда `ref` атрибут используется с классовым компонентом, объект рефа в свойстве `current` получает примонтированную сущность компонента. +- **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что у них нет сущностей. -The examples below demonstrate the differences. +Представленные ниже примеры демонстрируют отличия в зависимости от типа узла. -#### Adding a Ref to a DOM Element {#adding-a-ref-to-a-dom-element} +#### Добавление Рефа к DOM Элементу {#adding-a-ref-to-a-dom-element} -This code uses a `ref` to store a reference to a DOM node: +В представленном ниже примере `реф` используется для хранения ссылки на DOM элемент. ```javascript{5,12,22} class CustomTextInput extends React.Component { constructor(props) { super(props); - // create a ref to store the textInput DOM element + // создаем реф для хранения значения DOM элемента поля ввода текста this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { - // Explicitly focus the text input using the raw DOM API - // Note: we're accessing "current" to get the DOM node + // Задаем фокус на текстовое поле с помощью чистого DOM API + // Примечание: обращаемся к "current", чтобы получить DOM узел this.textInput.current.focus(); } @@ -96,7 +96,7 @@ class CustomTextInput extends React.Component { ref={this.textInput} /> @@ -105,11 +105,11 @@ class CustomTextInput extends React.Component { } ``` -React will assign the `current` property with the DOM element when the component mounts, and assign it back to `null` when it unmounts. `ref` updates happen before `componentDidMount` or `componentDidUpdate` lifecycle methods. +React поместит DOM элемент в свойство `current` при монтировании компонента и вернет обратно значение `null` при размонтировании. Обновление свойства `ref` происходит перед вызовом методов `componentDidMount` или `componentDidUpdate`. -#### Adding a Ref to a Class Component {#adding-a-ref-to-a-class-component} +#### Добавление Рефа к Классовому Компоненту {#adding-a-ref-to-a-class-component} -If we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its `focusTextInput` method manually: +Для того чтобы произвести имитацию клика по `CustomTextInput` из прошлого примера сразу же после монтирования, можно использовать реф, чтобы получить доступ к пользовательскому компоненту для ввода текста и явно вызвать его метод `focusTextInput`: ```javascript{4,8,13} class AutoFocusTextInput extends React.Component { @@ -130,7 +130,7 @@ class AutoFocusTextInput extends React.Component { } ``` -Note that this only works if `CustomTextInput` is declared as a class: +Обратите внимание, что это сработает только в том случае, если `CustomTextInput` объявлен как классовый компонент: ```js{1} class CustomTextInput extends React.Component { @@ -138,9 +138,9 @@ class CustomTextInput extends React.Component { } ``` -#### Refs and Function Components {#refs-and-function-components} +#### Рефы и Функциональные Компоненты {#refs-and-function-components} -**You may not use the `ref` attribute on function components** because they don't have instances: +**Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаются сущности: ```javascript{1,8,13} function MyFunctionComponent() { @@ -153,7 +153,7 @@ class Parent extends React.Component { this.textInput = React.createRef(); } render() { - // This will *not* work! + // Данный код *не будет* работать! return ( ); @@ -161,13 +161,13 @@ class Parent extends React.Component { } ``` -You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state. +Если вам нужен реф на функциональный компонент, превратите его в классовый, точно так же, как если бы вам нужно было использовать state или методы жизненного цикла компонента. -You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component: +Тем не менее, можно **использовать `ref` атрибут внутри функционального компонента** при условии, что он ссылается на DOM элемент или классовый компонент: ```javascript{2,3,6,13} function CustomTextInput(props) { - // textInput must be declared here so the ref can refer to it + // переменная textInput должна быть объявлена на верхнем уровне, чтобы реф мог иметь к ней доступ let textInput = React.createRef(); function handleClick() { @@ -181,7 +181,7 @@ function CustomTextInput(props) { ref={textInput} /> From 239c12cdde23d05f15be0e1c50b7876716833287 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:10:52 +0300 Subject: [PATCH 02/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 313f5f84f..9e6636e14 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -21,7 +21,7 @@ Cитуации, в которых использования рефов явл * Управление фокусом, выделение текста или воспроизведение медиа. * Императивный вызов анимаций. -* Интеграция со сторонними DOM библиотеками. +* Интеграция со сторонними DOM-библиотеками. Избегайте использования рефов в ситуациях, когда задачу можно решить декларативным методом. From 2ac172e094535f635c616123ba937dd24b59b9d7 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:11:34 +0300 Subject: [PATCH 03/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9e6636e14..4bc4c26fd 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -23,7 +23,7 @@ Cитуации, в которых использования рефов явл * Императивный вызов анимаций. * Интеграция со сторонними DOM-библиотеками. -Избегайте использования рефов в ситуациях, когда задачу можно решить декларативным методом. +Избегайте использования рефов в ситуациях, когда задачу можно решить декларативным способом. Например, вместо того чтобы предоставлять `open()` и `close()` методы для компонента `Dialog`, передавайте ему проп `isOpen`. From 192c904e5b61b5a00178341fba636dac96c2898d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:12:17 +0300 Subject: [PATCH 04/56] Update content/docs/refs-and-the-dom.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 👍 Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 4bc4c26fd..e4bc8302a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -25,7 +25,7 @@ Cитуации, в которых использования рефов явл Избегайте использования рефов в ситуациях, когда задачу можно решить декларативным способом. -Например, вместо того чтобы предоставлять `open()` и `close()` методы для компонента `Dialog`, передавайте ему проп `isOpen`. +Например, вместо того чтобы определять методы `open()` и `close()` в компоненте `Dialog`, лучше передавать ему проп `isOpen`. ### Не Злоупотребляйте Рефами {#dont-overuse-refs} From 0488358d7709efed65c90cda962751d111f5834e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:15:28 +0300 Subject: [PATCH 05/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e4bc8302a..6e53bf361 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -29,7 +29,7 @@ Cитуации, в которых использования рефов явл ### Не Злоупотребляйте Рефами {#dont-overuse-refs} -Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно, чтобы в вашем приложении “что-то произошло”. Если у вас сложилось такое впечатление, сделайте паузу и задумайтесь, где должно поддерживаться состояние в компонентной иерархии. Зачастую является очевидным, что правильным местом для “хранения” состояния является верхний уровень в иерархии. Подробнее об этом в главе [Подъём состояния](/docs/lifting-state-up.html). +Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно решить какую-то задачу в вашем приложении “во что бы то ни стало”. Если у вас сложилось такое впечатление, сделайте паузу и обдумайте, где должно храниться конкретное состояние в иерархии компонентов. Часто становится очевидно, что правильным местом для хранения состояния является верхний уровень в иерархии. Подробнее об этом -- в главе [Подъём состояния](/docs/lifting-state-up.html). > Заметка > From 7a1388c0cd65a02bd145f305b320af763ff7de8e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:15:59 +0300 Subject: [PATCH 06/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6e53bf361..aa0ffdc41 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -67,7 +67,7 @@ const node = this.myRef.current; Представленные ниже примеры демонстрируют отличия в зависимости от типа узла. -#### Добавление Рефа к DOM Элементу {#adding-a-ref-to-a-dom-element} +#### Добавление рефа к DOM-элементу {#adding-a-ref-to-a-dom-element} В представленном ниже примере `реф` используется для хранения ссылки на DOM элемент. From 3eb79297e846512b1e3b4ebe455d10e11c8681e2 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:17:47 +0300 Subject: [PATCH 07/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index aa0ffdc41..6814a9ad6 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -33,7 +33,7 @@ Cитуации, в которых использования рефов явл > Заметка > -> Приведённые ниже примеры были обновлены с использованием `React.createRef()` API представленном в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). +> Приведённые ниже примеры были обновлены с использованием API `React.createRef()` введённом в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). ### Создание Рефов {#creating-refs} From 22e20f51260175797860339dcb183a568b9877c4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:18:37 +0300 Subject: [PATCH 08/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6814a9ad6..aabbaffd3 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -61,7 +61,7 @@ const node = this.myRef.current; Значение рефа отличается в зависимости от типа узла: -- Когда `ref` атрибут используется с HTML элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM элемент. +- Когда атрибут `ref` используется с HTML-элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM-элемент. - Когда `ref` атрибут используется с классовым компонентом, объект рефа в свойстве `current` получает примонтированную сущность компонента. - **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что у них нет сущностей. From 3b6f264630afbfc017c2762b2ad3f6f69916b0e7 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:18:53 +0300 Subject: [PATCH 09/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index aabbaffd3..ced68b0f2 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -62,7 +62,7 @@ const node = this.myRef.current; Значение рефа отличается в зависимости от типа узла: - Когда атрибут `ref` используется с HTML-элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM-элемент. -- Когда `ref` атрибут используется с классовым компонентом, объект рефа в свойстве `current` получает примонтированную сущность компонента. +- Когда атрибут `ref` используется с классовым компонентом, объект рефа в свойстве `current` получает экземпляр смонтированного компонента. - **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что у них нет сущностей. Представленные ниже примеры демонстрируют отличия в зависимости от типа узла. From 76ef587437ac3b5b7c896607bbc47b89a0a2f415 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:19:59 +0300 Subject: [PATCH 10/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index ced68b0f2..764baabe0 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -63,7 +63,7 @@ const node = this.myRef.current; - Когда атрибут `ref` используется с HTML-элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM-элемент. - Когда атрибут `ref` используется с классовым компонентом, объект рефа в свойстве `current` получает экземпляр смонтированного компонента. -- **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что у них нет сущностей. +- **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаётся экземпляров. Представленные ниже примеры демонстрируют отличия в зависимости от типа узла. From 722b7eba27477afc69bc3818484fa9e4933a8f11 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:20:18 +0300 Subject: [PATCH 11/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 764baabe0..d4b9b403e 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -69,7 +69,7 @@ const node = this.myRef.current; #### Добавление рефа к DOM-элементу {#adding-a-ref-to-a-dom-element} -В представленном ниже примере `реф` используется для хранения ссылки на DOM элемент. +В представленном ниже примере `реф` используется для хранения ссылки на DOM-элемент. ```javascript{5,12,22} class CustomTextInput extends React.Component { From f09899cf3b35c9f145497df320216cd0a5501528 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:21:42 +0300 Subject: [PATCH 12/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index d4b9b403e..795b6fc94 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -82,7 +82,7 @@ class CustomTextInput extends React.Component { focusTextInput() { // Задаем фокус на текстовое поле с помощью чистого DOM API - // Примечание: обращаемся к "current", чтобы получить DOM узел + // Примечание: обращаемся к "current", чтобы получить DOM-узел this.textInput.current.focus(); } From 6fc55a57c137cfee9f7086209ff76aa7b712f31e Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Fri, 8 Mar 2019 22:25:11 +0300 Subject: [PATCH 13/56] Fix titles case --- content/docs/refs-and-the-dom.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 795b6fc94..ece7d7053 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -13,9 +13,9 @@ permalink: docs/refs-and-the-dom.html Рефы дают возможность получить доступ к DOM-узлам или React-элементам, созданным в методе `render`. -В обычном потоке данных React родительские компоненты могут взаимодействовать с дочерними только через [пропсы](/docs/components-and-props.html). Чтобы модифицировать потомка, вы должны заново отрендерить его с новыми пропсами. Тем не менее, могут возникать ситуации, когда вам требуется императивно изменить дочерний элемент вопреки обычному потоку данных. Подлежащий изменениям дочерний элемент может быть как React компонентом, так и DOM элементом. В обоих случаях, React предоставляет спасательный круг (обходное решение). +В обычном потоке данных React родительские компоненты могут взаимодействовать с дочерними только через [пропсы](/docs/components-and-props.html). Чтобы модифицировать потомка, вы должны заново отрендерить его с новыми пропсами. Тем не менее, могут возникать ситуации, когда вам требуется императивно изменить дочерний элемент, обойдя обычный поток данных. Подлежащий изменениям дочерний элемент может быть как React-компонентом, так и DOM-элементом. React предоставляет лазейку для обоих случаев. -### Когда Использовать Рефы {#when-to-use-refs} +### Когда использовать рефы {#when-to-use-refs} Cитуации, в которых использования рефов является оправданным: @@ -27,7 +27,7 @@ Cитуации, в которых использования рефов явл Например, вместо того чтобы определять методы `open()` и `close()` в компоненте `Dialog`, лучше передавать ему проп `isOpen`. -### Не Злоупотребляйте Рефами {#dont-overuse-refs} +### Не злоупотребляйте рефами {#dont-overuse-refs} Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно решить какую-то задачу в вашем приложении “во что бы то ни стало”. Если у вас сложилось такое впечатление, сделайте паузу и обдумайте, где должно храниться конкретное состояние в иерархии компонентов. Часто становится очевидно, что правильным местом для хранения состояния является верхний уровень в иерархии. Подробнее об этом -- в главе [Подъём состояния](/docs/lifting-state-up.html). @@ -35,7 +35,7 @@ Cитуации, в которых использования рефов явл > > Приведённые ниже примеры были обновлены с использованием API `React.createRef()` введённом в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). -### Создание Рефов {#creating-refs} +### Создание рефов {#creating-refs} Рефы создаются с помощью `React.createRef()` и прикрепляются к React элементам через `ref` атрибут. Обычно рефы присваиваются свойству экземпляра класса в конструкторе, чтобы на них можно ссылаться из любой части компонента. @@ -51,7 +51,7 @@ class MyComponent extends React.Component { } ``` -### Доступ к Рефам {#accessing-refs} +### Доступ к рефам {#accessing-refs} Когда реф передается элементу в методе `render`, ссылка на данный узел становится доступной через атрибут `current` в рефе. @@ -107,7 +107,7 @@ class CustomTextInput extends React.Component { React поместит DOM элемент в свойство `current` при монтировании компонента и вернет обратно значение `null` при размонтировании. Обновление свойства `ref` происходит перед вызовом методов `componentDidMount` или `componentDidUpdate`. -#### Добавление Рефа к Классовому Компоненту {#adding-a-ref-to-a-class-component} +#### Добавление рефа к классовому компоненту {#adding-a-ref-to-a-class-component} Для того чтобы произвести имитацию клика по `CustomTextInput` из прошлого примера сразу же после монтирования, можно использовать реф, чтобы получить доступ к пользовательскому компоненту для ввода текста и явно вызвать его метод `focusTextInput`: @@ -138,7 +138,7 @@ class CustomTextInput extends React.Component { } ``` -#### Рефы и Функциональные Компоненты {#refs-and-function-components} +#### Рефы и функциональные компоненты {#refs-and-function-components} **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаются сущности: From 8225fec8cc14a047b61b8c8a091d9fabb6d3e592 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:25:58 +0300 Subject: [PATCH 14/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index ece7d7053..6ad5f48af 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -75,7 +75,7 @@ const node = this.myRef.current; class CustomTextInput extends React.Component { constructor(props) { super(props); - // создаем реф для хранения значения DOM элемента поля ввода текста + // создаем реф для хранения значения DOM-элемента поля ввода текста this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } From de2d88bb43f6e85e698c38ec74afc9215650edab Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:26:36 +0300 Subject: [PATCH 15/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6ad5f48af..32625a1d9 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -105,7 +105,7 @@ class CustomTextInput extends React.Component { } ``` -React поместит DOM элемент в свойство `current` при монтировании компонента и вернет обратно значение `null` при размонтировании. Обновление свойства `ref` происходит перед вызовом методов `componentDidMount` или `componentDidUpdate`. +React присвоит DOM-элемент свойству `current` при монтировании компонента и присвоит обратно значение `null` при размонтировании. Обновление свойства `ref` происходит перед вызовом методов `componentDidMount` и `componentDidUpdate`. #### Добавление рефа к классовому компоненту {#adding-a-ref-to-a-class-component} From 546274ab95f2d2c948c2a2f4e5b89d1c65b574f4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:27:42 +0300 Subject: [PATCH 16/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 32625a1d9..bbd7dc47c 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -109,7 +109,7 @@ React присвоит DOM-элемент свойству `current` при мо #### Добавление рефа к классовому компоненту {#adding-a-ref-to-a-class-component} -Для того чтобы произвести имитацию клика по `CustomTextInput` из прошлого примера сразу же после монтирования, можно использовать реф, чтобы получить доступ к пользовательскому компоненту для ввода текста и явно вызвать его метод `focusTextInput`: +Для того чтобы произвести имитацию клика по `CustomTextInput` из прошлого примера сразу же после монтирования, можно использовать реф, чтобы получить доступ к пользовательскому `` и явно вызвать его метод `focusTextInput`: ```javascript{4,8,13} class AutoFocusTextInput extends React.Component { From f83161efa3b803610387248a73159d3fcdcfa0ab Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:28:55 +0300 Subject: [PATCH 17/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index bbd7dc47c..f3e7a21bf 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -140,7 +140,7 @@ class CustomTextInput extends React.Component { #### Рефы и функциональные компоненты {#refs-and-function-components} -**Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаются сущности: +**Нельзя использовать атрибут `ref` с функциональными компонентами**, потому что для них не создаётся экземпляров: ```javascript{1,8,13} function MyFunctionComponent() { From e77fa0bc30c8c04ed050b80dfa6794e7085af38e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:29:14 +0300 Subject: [PATCH 18/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f3e7a21bf..09ec03e2f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -161,7 +161,7 @@ class Parent extends React.Component { } ``` -Если вам нужен реф на функциональный компонент, превратите его в классовый, точно так же, как если бы вам нужно было использовать state или методы жизненного цикла компонента. +Если вам нужен реф на функциональный компонент, превратите его в классовый, точно так же, как если бы вам нужно было использовать состояние или методы жизненного цикла компонента. Тем не менее, можно **использовать `ref` атрибут внутри функционального компонента** при условии, что он ссылается на DOM элемент или классовый компонент: From bdadeb809aaad3dc36aaecea128b7aa47b35868c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 8 Mar 2019 22:29:27 +0300 Subject: [PATCH 19/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 09ec03e2f..d719a5741 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -163,7 +163,7 @@ class Parent extends React.Component { Если вам нужен реф на функциональный компонент, превратите его в классовый, точно так же, как если бы вам нужно было использовать состояние или методы жизненного цикла компонента. -Тем не менее, можно **использовать `ref` атрибут внутри функционального компонента** при условии, что он ссылается на DOM элемент или классовый компонент: +Тем не менее, можно **использовать атрибут `ref` внутри функционального компонента** при условии, что он ссылается на DOM-элемент или классовый компонент: ```javascript{2,3,6,13} function CustomTextInput(props) { From 3f69742ee52fd68b4582ce6eff6ac99e482f45cc Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sat, 9 Mar 2019 11:35:14 +0300 Subject: [PATCH 20/56] Add translation for Exposing DOM Refs to Parent Components paragraph --- content/docs/refs-and-the-dom.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index d719a5741..02e82473f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -189,17 +189,17 @@ function CustomTextInput(props) { } ``` -### Exposing DOM Refs to Parent Components {#exposing-dom-refs-to-parent-components} +### Передача DOM-рефов родительским компонентам {#exposing-dom-refs-to-parent-components} -In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node. +В редких случаях, вам может понадобиться доступ к дочернему DOM-узлу из родительского компонента. В общем случае, такой подход не рекомендуется, т.к. ведет к нарушению инкапсуляции компонента, но иногда он может пригодиться для задания фокуса или измерения размеров или положения дочернего DOM-узла. -While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components. +Несмотря на то, что можно было бы [добавить реф к дочернему компоненту](#adding-a-ref-to-a-class-component), такое решение не является идеальным, т.к. вы получите экземпляр компонента вместо DOM-узла. Кроме того, это не сработает с функциональными компонентами. -If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +Если вы работаете с React 16.3 или выше, мы рекомендуем использовать [перенаправление рефов](/docs/forwarding-refs.html) для таких случаев. **Перенаправление рефов позволяет компонентам осуществлять передачу рефа любого дочернего компонента как своего собственного**. Вы можете найти детальные примеры того, как передать дочерний DOM-узел родительскому компоненту [в документации по перенаправлению рефов](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) and explicitly pass a ref as a differently named prop. +Если вы используете React версии 16.2 или ниже, или если вам нужно решение более гибкое чем перенаправление рефов, вы можете использовать [данный альтернативный подход](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) и явно передавать реф как проп с другим именем. -When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). +По возможности, мы советуем избегать передачи DOM-узлов, но это может быть полезной лазейкой. Заметим, что данный подход требует добавления кода в дочерний компонент. Если у вас нет никакого контроля над реализацией дочернего компонента, последним вариантом является использование [`findDOMNode()`](/docs/react-dom.html#finddomnode), но такое решение не рекомендуется и не поддерживается в [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). ### Callback Refs {#callback-refs} From 7dcba7a09f9341f9fa85baa506c63b0c7292f542 Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sat, 9 Mar 2019 13:09:23 +0300 Subject: [PATCH 21/56] Add translation for Callback Refs paragraph --- content/docs/refs-and-the-dom.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 02e82473f..935ccb0ea 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -87,8 +87,8 @@ class CustomTextInput extends React.Component { } render() { - // tell React that we want to associate the ref - // with the `textInput` that we created in the constructor + // описываем, что мы хотим связать реф + // с `textInput` созданным в конструкторе return (
{ - // Focus the text input using the raw DOM API + // Определяем фокус на текстовом поле ввода с помощью чистого DOM API if (this.textInput) this.textInput.focus(); }; } componentDidMount() { - // autofocus the input on mount + // определяем автофокус на input при монтировании this.focusTextInput(); } render() { - // Use the `ref` callback to store a reference to the text input DOM - // element in an instance field (for example, this.textInput). + // Используем `ref` колбэк, чтобы сохранить ссылку на DOM-элемент + // поля текстового ввода в поле экземпляра (например, this.textInput). return (
`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `` element in the `CustomTextInput`. +В представленном выше примере, `Parent` передает свой колбэк реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передает ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге, свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла соответствующего ``-элементу в `CustomTextInput`. ### Legacy API: String Refs {#legacy-api-string-refs} From 255f6eb714e4a68f2d2d86dd540d81b5d920bd2a Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sat, 9 Mar 2019 13:10:56 +0300 Subject: [PATCH 22/56] Fix typo --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 935ccb0ea..f77306342 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -275,7 +275,7 @@ class Parent extends React.Component { } ``` -В представленном выше примере, `Parent` передает свой колбэк реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передает ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге, свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла соответствующего ``-элементу в `CustomTextInput`. +В представленном выше примере, `Parent` передает свой колбэк реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передает ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге, свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла, соответствующего ``-элементу в `CustomTextInput`. ### Legacy API: String Refs {#legacy-api-string-refs} From 1020660a73c6605a9685fc5672b3881ac75d3c7b Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sat, 9 Mar 2019 13:39:11 +0300 Subject: [PATCH 23/56] Add translation for Legacy API: String Refs paragraph --- content/docs/refs-and-the-dom.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f77306342..087faa45a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -277,13 +277,13 @@ class Parent extends React.Component { В представленном выше примере, `Parent` передает свой колбэк реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передает ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге, свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла, соответствующего ``-элементу в `CustomTextInput`. -### Legacy API: String Refs {#legacy-api-string-refs} +### Устаревший API: строчные рефы {#legacy-api-string-refs} -If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. +Если вы уже работали с React ранее, возможно вы знакомы с более старым API, в котором атрибут `ref` является строкой, например`"textInput"`, а DOM-узел доступен в `this.refs.textInput`. Мы не советуем пользоваться таким решением, т.к. у срочных рефов есть [некоторые недоработки](https://github.com/facebook/react/pull/8333#issuecomment-271648615), они являются устаревшими и **скорее всего потеряют поддержку в будущем**. -> Note +> Заметка > -> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead. +> Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [колбэк паттерна](#callback-refs) или [`createRef` API](#creating-refs). ### Caveats with callback refs {#caveats-with-callback-refs} From 05ed02da8ff6227d1cc7f827f8d93c4f86b6e655 Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sat, 9 Mar 2019 14:10:29 +0300 Subject: [PATCH 24/56] Add translation for Caveats with callback refs paragraph --- content/docs/refs-and-the-dom.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 087faa45a..e4fc33a22 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -285,6 +285,7 @@ class Parent extends React.Component { > > Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [колбэк паттерна](#callback-refs) или [`createRef` API](#creating-refs). -### Caveats with callback refs {#caveats-with-callback-refs} +### Предостережения насчет колбэк рефов {#caveats-with-callback-refs} + +Если `ref` колбэк определен как встроенная функция, он будет вызван дважды во время обновлений: первый раз со значением `null`, а затем снова с DOM-элементом. Это связано с тем, что с каждым рендером создается новый экземпляр функции, поэтому React должен очистить старый реф и задать новый. Такого поведения можно избежать, если `ref` колбэк будет определен с привязанным к классу контекстом, но, заметим, что это не будет играть роли в большинстве случаев. -If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases. From 182822d763cfc629e63df1e7b168c4ffcfe64151 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:02:27 +0300 Subject: [PATCH 25/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e4fc33a22..3adbb6b33 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -37,7 +37,7 @@ Cитуации, в которых использования рефов явл ### Создание рефов {#creating-refs} -Рефы создаются с помощью `React.createRef()` и прикрепляются к React элементам через `ref` атрибут. Обычно рефы присваиваются свойству экземпляра класса в конструкторе, чтобы на них можно ссылаться из любой части компонента. +Рефы создаются с помощью `React.createRef()` и прикрепляются к React-элементам через `ref` атрибут. Обычно рефы присваиваются свойству экземпляра класса в конструкторе, чтобы на них можно ссылаться из любой части компонента. ```javascript{4,7} class MyComponent extends React.Component { From b0e09dacd117b72316030b815e459e30263ec85c Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:03:20 +0300 Subject: [PATCH 26/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 3adbb6b33..f9d1b2c30 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -275,7 +275,7 @@ class Parent extends React.Component { } ``` -В представленном выше примере, `Parent` передает свой колбэк реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передает ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге, свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла, соответствующего ``-элементу в `CustomTextInput`. +В представленном выше примере, `Parent` передаёт свой колбэк-реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передаёт ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла, соответствующего элементу `` в `CustomTextInput`. ### Устаревший API: строчные рефы {#legacy-api-string-refs} From 1d3b40b065d90ccf5b4648aa74570c84f4e00dce Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:03:43 +0300 Subject: [PATCH 27/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f9d1b2c30..c722fed2c 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -69,7 +69,7 @@ const node = this.myRef.current; #### Добавление рефа к DOM-элементу {#adding-a-ref-to-a-dom-element} -В представленном ниже примере `реф` используется для хранения ссылки на DOM-элемент. +В представленном ниже примере `ref` используется для хранения ссылки на DOM-элемент. ```javascript{5,12,22} class CustomTextInput extends React.Component { From f970aad4575a5297cc809138629836607aeb4ab2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:03:56 +0300 Subject: [PATCH 28/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index c722fed2c..d8d2fe61f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -87,7 +87,7 @@ class CustomTextInput extends React.Component { } render() { - // описываем, что мы хотим связать реф + // описываем, что мы хотим связать реф // с `textInput` созданным в конструкторе return (
From 8d16089925e62dfffc2f604c28032346a54ce518 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:04:10 +0300 Subject: [PATCH 29/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index d8d2fe61f..afb42db31 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -279,7 +279,7 @@ class Parent extends React.Component { ### Устаревший API: строчные рефы {#legacy-api-string-refs} -Если вы уже работали с React ранее, возможно вы знакомы с более старым API, в котором атрибут `ref` является строкой, например`"textInput"`, а DOM-узел доступен в `this.refs.textInput`. Мы не советуем пользоваться таким решением, т.к. у срочных рефов есть [некоторые недоработки](https://github.com/facebook/react/pull/8333#issuecomment-271648615), они являются устаревшими и **скорее всего потеряют поддержку в будущем**. +Если вы уже работали с React ранее, возможно вы знакомы с более старым API, в котором атрибут `ref` является строкой, например`"textInput"`, а DOM-узел доступен в `this.refs.textInput`. Мы не советуем пользоваться таким решением, т.к. у строковых рефов есть [некоторые недостатки](https://github.com/facebook/react/pull/8333#issuecomment-271648615), они являются устаревшими и **будут удалены в одном из будущих релизах**. > Заметка > From df719dcdae4fe6476af2cd57f05c95772cd9b4c9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:06:52 +0300 Subject: [PATCH 30/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index afb42db31..6d13545c4 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -287,5 +287,5 @@ class Parent extends React.Component { ### Предостережения насчет колбэк рефов {#caveats-with-callback-refs} -Если `ref` колбэк определен как встроенная функция, он будет вызван дважды во время обновлений: первый раз со значением `null`, а затем снова с DOM-элементом. Это связано с тем, что с каждым рендером создается новый экземпляр функции, поэтому React должен очистить старый реф и задать новый. Такого поведения можно избежать, если `ref` колбэк будет определен с привязанным к классу контекстом, но, заметим, что это не будет играть роли в большинстве случаев. +Если `ref` колбэк определён как встроенная функция, колбэк будет вызван дважды во время обновлений: первый раз со значением `null`, а затем снова с DOM-элементом. Это связано с тем, что с каждым рендером создаётся новый экземпляр функции, поэтому React должен очистить старый реф и задать новый. Такого поведения можно избежать, если колбэк в `ref` будет определён с привязанным к классу контекстом, но, заметим, что это не будет играть роли в большинстве случаев. From d17e214d99a74b8085a2cce11a93aa533a0596cc Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:07:32 +0300 Subject: [PATCH 31/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6d13545c4..39a4be7ba 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -29,7 +29,7 @@ Cитуации, в которых использования рефов явл ### Не злоупотребляйте рефами {#dont-overuse-refs} -Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно решить какую-то задачу в вашем приложении “во что бы то ни стало”. Если у вас сложилось такое впечатление, сделайте паузу и обдумайте, где должно храниться конкретное состояние в иерархии компонентов. Часто становится очевидно, что правильным местом для хранения состояния является верхний уровень в иерархии. Подробнее об этом -- в главе [Подъём состояния](/docs/lifting-state-up.html). +Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно решить какую-то задачу в вашем приложении «во что бы то ни стало». Если у вас сложилось такое впечатление, сделайте паузу и обдумайте, где должно храниться конкретное состояние в иерархии компонентов. Часто становится очевидно, что правильным местом для хранения состояния является верхний уровень в иерархии. Подробнее об этом -- в главе [Подъём состояния](/docs/lifting-state-up.html). > Заметка > From c2e92601b15402e31121fec2675964c3520c7306 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:07:44 +0300 Subject: [PATCH 32/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 39a4be7ba..3a08bbcdb 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -31,7 +31,7 @@ Cитуации, в которых использования рефов явл Возможно, с первого взгляда вам показалось, что рефы применяются, когда нужно решить какую-то задачу в вашем приложении «во что бы то ни стало». Если у вас сложилось такое впечатление, сделайте паузу и обдумайте, где должно храниться конкретное состояние в иерархии компонентов. Часто становится очевидно, что правильным местом для хранения состояния является верхний уровень в иерархии. Подробнее об этом -- в главе [Подъём состояния](/docs/lifting-state-up.html). -> Заметка +> Примечание > > Приведённые ниже примеры были обновлены с использованием API `React.createRef()` введённом в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). From 668f6ba41140f93f573310fa0094e89520b17ba4 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:17:42 +0300 Subject: [PATCH 33/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 3a08bbcdb..25de28ec7 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -195,7 +195,7 @@ function CustomTextInput(props) { Несмотря на то, что можно было бы [добавить реф к дочернему компоненту](#adding-a-ref-to-a-class-component), такое решение не является идеальным, т.к. вы получите экземпляр компонента вместо DOM-узла. Кроме того, это не сработает с функциональными компонентами. -Если вы работаете с React 16.3 или выше, мы рекомендуем использовать [перенаправление рефов](/docs/forwarding-refs.html) для таких случаев. **Перенаправление рефов позволяет компонентам осуществлять передачу рефа любого дочернего компонента как своего собственного**. Вы можете найти детальные примеры того, как передать дочерний DOM-узел родительскому компоненту [в документации по перенаправлению рефов](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +Если вы работаете с React 16.3 или новее, мы рекомендуем использовать [перенаправление рефов](/docs/forwarding-refs.html) для таких случаев. **Перенаправление рефов позволяет компонентам осуществлять передачу рефа любого дочернего компонента как своего собственного**. Вы можете найти детальные примеры того, как передать дочерний DOM-узел родительскому компоненту [в документации по перенаправлению рефов](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). Если вы используете React версии 16.2 или ниже, или если вам нужно решение более гибкое чем перенаправление рефов, вы можете использовать [данный альтернативный подход](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) и явно передавать реф как проп с другим именем. From b42e7620e325b98e812bca16d9fdf5254f47412c Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:18:57 +0300 Subject: [PATCH 34/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 25de28ec7..8b562cb93 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -33,7 +33,7 @@ Cитуации, в которых использования рефов явл > Примечание > -> Приведённые ниже примеры были обновлены с использованием API `React.createRef()` введённом в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк рефы](#callback-refs). +> Приведённые ниже примеры были обновлены с использованием API-метода `React.createRef()` добавленного в React 16.3. Если вы используете более старую версию React, мы рекомендуем использовать [колбэк-рефы](#callback-refs). ### Создание рефов {#creating-refs} From fc00492bc7809eaf68794222c825200d099365cc Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:19:13 +0300 Subject: [PATCH 35/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 8b562cb93..44777053e 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -277,7 +277,7 @@ class Parent extends React.Component { В представленном выше примере, `Parent` передаёт свой колбэк-реф как проп `inputRef` компоненту `CustomTextInput`, а `CustomTextInput` передаёт ту же самую функцию как специальный атрибут `ref` элементу ``. В итоге свойство `this.inputElement` компонента `Parent` будет хранить значение DOM-узла, соответствующего элементу `` в `CustomTextInput`. -### Устаревший API: строчные рефы {#legacy-api-string-refs} +### Устаревший API: строковые рефы {#legacy-api-string-refs} Если вы уже работали с React ранее, возможно вы знакомы с более старым API, в котором атрибут `ref` является строкой, например`"textInput"`, а DOM-узел доступен в `this.refs.textInput`. Мы не советуем пользоваться таким решением, т.к. у строковых рефов есть [некоторые недостатки](https://github.com/facebook/react/pull/8333#issuecomment-271648615), они являются устаревшими и **будут удалены в одном из будущих релизах**. From 69cb7e9fac4e3511de50a5acfb33eb22a27fc27c Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:20:24 +0300 Subject: [PATCH 36/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 44777053e..eb85af74f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -75,7 +75,7 @@ const node = this.myRef.current; class CustomTextInput extends React.Component { constructor(props) { super(props); - // создаем реф для хранения значения DOM-элемента поля ввода текста + // создадим реф в поле `textInput` для хранения DOM-элемента this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } From bdef9c0bf7a86fe1a94efa5ca40bf05aee99f8b6 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:20:37 +0300 Subject: [PATCH 37/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index eb85af74f..839198ba7 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -81,7 +81,7 @@ class CustomTextInput extends React.Component { } focusTextInput() { - // Задаем фокус на текстовое поле с помощью чистого DOM API + // Установим фокус на текстовое поле с помощью чистого DOM API // Примечание: обращаемся к "current", чтобы получить DOM-узел this.textInput.current.focus(); } From c3e0ea24eea11ff0f546ada5a1c7f34e35d5d9d8 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:28:16 +0300 Subject: [PATCH 38/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 839198ba7..3ce2e1aa0 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -197,7 +197,7 @@ function CustomTextInput(props) { Если вы работаете с React 16.3 или новее, мы рекомендуем использовать [перенаправление рефов](/docs/forwarding-refs.html) для таких случаев. **Перенаправление рефов позволяет компонентам осуществлять передачу рефа любого дочернего компонента как своего собственного**. Вы можете найти детальные примеры того, как передать дочерний DOM-узел родительскому компоненту [в документации по перенаправлению рефов](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -Если вы используете React версии 16.2 или ниже, или если вам нужно решение более гибкое чем перенаправление рефов, вы можете использовать [данный альтернативный подход](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) и явно передавать реф как проп с другим именем. +Если вы используете React версии 16.2 или ниже, или если вам нужно решение более гибкое, чем перенаправление рефов, вы можете использовать [данный альтернативный подход](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) и явно передавать реф как проп с другим именем. По возможности, мы советуем избегать передачи DOM-узлов, но это может быть полезной лазейкой. Заметим, что данный подход требует добавления кода в дочерний компонент. Если у вас нет никакого контроля над реализацией дочернего компонента, последним вариантом является использование [`findDOMNode()`](/docs/react-dom.html#finddomnode), но такое решение не рекомендуется и не поддерживается в [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). From e6780a37ead1d00970f3a73f6bb91e9d441b44fe Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:28:36 +0300 Subject: [PATCH 39/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 3ce2e1aa0..bd49e8c80 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -283,7 +283,7 @@ class Parent extends React.Component { > Заметка > -> Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [колбэк паттерна](#callback-refs) или [`createRef` API](#creating-refs). +> Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [паттерна с колбэком](#callback-refs) или [`createRef` API](#creating-refs). ### Предостережения насчет колбэк рефов {#caveats-with-callback-refs} From fc2929d2823240b33903b3b94a2d133dd06fd0f9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:28:59 +0300 Subject: [PATCH 40/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index bd49e8c80..35e163a46 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -285,7 +285,7 @@ class Parent extends React.Component { > > Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [паттерна с колбэком](#callback-refs) или [`createRef` API](#creating-refs). -### Предостережения насчет колбэк рефов {#caveats-with-callback-refs} +### Предостережения насчёт колбэк-рефов {#caveats-with-callback-refs} Если `ref` колбэк определён как встроенная функция, колбэк будет вызван дважды во время обновлений: первый раз со значением `null`, а затем снова с DOM-элементом. Это связано с тем, что с каждым рендером создаётся новый экземпляр функции, поэтому React должен очистить старый реф и задать новый. Такого поведения можно избежать, если колбэк в `ref` будет определён с привязанным к классу контекстом, но, заметим, что это не будет играть роли в большинстве случаев. From c29ef596ad4b201ca6da6d009f4193467265cc41 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:29:24 +0300 Subject: [PATCH 41/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 35e163a46..6b284c43c 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -281,7 +281,7 @@ class Parent extends React.Component { Если вы уже работали с React ранее, возможно вы знакомы с более старым API, в котором атрибут `ref` является строкой, например`"textInput"`, а DOM-узел доступен в `this.refs.textInput`. Мы не советуем пользоваться таким решением, т.к. у строковых рефов есть [некоторые недостатки](https://github.com/facebook/react/pull/8333#issuecomment-271648615), они являются устаревшими и **будут удалены в одном из будущих релизах**. -> Заметка +> Примечание > > Если вы используете `this.refs.textInput` для доступа к рефам в своих проектах, мы рекомендуем перейти к использованию [паттерна с колбэком](#callback-refs) или [`createRef` API](#creating-refs). From d3d04a7e5638f1c286a1283af5c0b2fd6f3c1788 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:29:42 +0300 Subject: [PATCH 42/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6b284c43c..92f1dd246 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -253,7 +253,7 @@ class CustomTextInput extends React.Component { React вызовет `ref` колбэк с DOM-элементом при монтировании компонента, а также вызовет его со значением `null` при размонтировании. Рефы будут хранить актуальное значение перед вызовом методов `componentDidMount` или `componentDidUpdate`. -Вы можете передавать колбэк рефы между компонентами точно так же как и объектные рефы, созданные с помощью `React.createRef()`. +Вы можете передавать колбэк-рефы между компонентами точно так же, как и объектные рефы, созданные через `React.createRef()`. ```javascript{4,13} function CustomTextInput(props) { From c21a094e1ffbd3ec6f41bde5bef386b836ef49f9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:29:58 +0300 Subject: [PATCH 43/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 92f1dd246..116a05a15 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -227,7 +227,7 @@ class CustomTextInput extends React.Component { } componentDidMount() { - // определяем автофокус на input при монтировании + // устанавливаем фокус на input при монтировании this.focusTextInput(); } From 9154795de0b192a765b8d24c9a6dec80f60849a9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:30:08 +0300 Subject: [PATCH 44/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 116a05a15..c468e7483 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -221,7 +221,7 @@ class CustomTextInput extends React.Component { }; this.focusTextInput = () => { - // Определяем фокус на текстовом поле ввода с помощью чистого DOM API + // Устанавливаем фокус на текстовом поле ввода с помощью чистого DOM API if (this.textInput) this.textInput.focus(); }; } From e5f55771d9c4c94f8bc9e7ace20fe910022cae7b Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:30:24 +0300 Subject: [PATCH 45/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index c468e7483..0919ad2c0 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -205,7 +205,7 @@ function CustomTextInput(props) { Кроме того, React поддерживает другой способ определения рефов, который называется "колбэк рефы" и предоставляет более полный контроль над их присвоением и сбросом. -Вместо того чтобы передавать атрибут `ref` созданный с помощью `createRef()`, вы можете передать функцию. Данная функция получит экземпляр React-компонента или HTML DOM-элемент в качестве аргумента, которые потом могут быть сохранены или доступны в любом другом месте. +Вместо того, чтобы передавать атрибут `ref` созданный с помощью `createRef()`, вы можете передать функцию. Данная функция получит экземпляр React-компонента или HTML DOM-элемент в качестве аргумента, которые потом могут быть сохранены или доступны в любом другом месте. Представленный ниже пример реализует общий паттерн: использование `ref` колбэка для хранения ссылки на DOM-узел в свойстве экземпляра. From 2a687dd1b4999f2d59a1eda5c93c4f056f1ee393 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:30:45 +0300 Subject: [PATCH 46/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 0919ad2c0..8f4355d30 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -203,7 +203,7 @@ function CustomTextInput(props) { ### Колбэк рефы {#callback-refs} -Кроме того, React поддерживает другой способ определения рефов, который называется "колбэк рефы" и предоставляет более полный контроль над их присвоением и сбросом. +Кроме того, React поддерживает другой способ определения рефов, который называется «колбэк-рефы» и предоставляет более полный контроль над их присвоением и сбросом. Вместо того, чтобы передавать атрибут `ref` созданный с помощью `createRef()`, вы можете передать функцию. Данная функция получит экземпляр React-компонента или HTML DOM-элемент в качестве аргумента, которые потом могут быть сохранены или доступны в любом другом месте. From ef7f2bd3e07c4a2af4f2abe0138c69ef20daebbe Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:31:13 +0300 Subject: [PATCH 47/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 8f4355d30..5c0a1679a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -191,7 +191,7 @@ function CustomTextInput(props) { ### Передача DOM-рефов родительским компонентам {#exposing-dom-refs-to-parent-components} -В редких случаях, вам может понадобиться доступ к дочернему DOM-узлу из родительского компонента. В общем случае, такой подход не рекомендуется, т.к. ведет к нарушению инкапсуляции компонента, но иногда он может пригодиться для задания фокуса или измерения размеров или положения дочернего DOM-узла. +В редких случаях вам может понадобиться доступ к дочернему DOM-узлу из родительского компонента. В общем случае, такой подход не рекомендуется, т.к. ведёт к нарушению инкапсуляции компонента, но иногда он может пригодиться для задания фокуса или измерения размеров, или положения дочернего DOM-узла. Несмотря на то, что можно было бы [добавить реф к дочернему компоненту](#adding-a-ref-to-a-class-component), такое решение не является идеальным, т.к. вы получите экземпляр компонента вместо DOM-узла. Кроме того, это не сработает с функциональными компонентами. From 9861eab716f29831ea15e7f33d4f9671b01a0471 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:32:35 +0300 Subject: [PATCH 48/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 5c0a1679a..c9fbb42de 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -167,7 +167,8 @@ class Parent extends React.Component { ```javascript{2,3,6,13} function CustomTextInput(props) { - // переменная textInput должна быть объявлена на верхнем уровне, чтобы реф мог иметь к ней доступ + // переменная textInput должна быть объявлена на верхнем уровне, + // чтобы реф мог иметь к ней доступ let textInput = React.createRef(); function handleClick() { From 5e1131831c07342c7a58baa63bed8e0db4bd77d6 Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sun, 10 Mar 2019 23:34:59 +0300 Subject: [PATCH 49/56] Update nav.yml --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index a45839de3..e894e69d9 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -66,7 +66,7 @@ - id: reconciliation title: Согласование - id: refs-and-the-dom - title: Refs and the DOM + title: Рефы и DOM - id: render-props title: Рендер-пропсы - id: static-type-checking From bc1c39357102ac797392977d4f2ffc9c87fab47e Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:35:28 +0300 Subject: [PATCH 50/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index c9fbb42de..7bb956340 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -62,7 +62,7 @@ const node = this.myRef.current; Значение рефа отличается в зависимости от типа узла: - Когда атрибут `ref` используется с HTML-элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM-элемент. -- Когда атрибут `ref` используется с классовым компонентом, объект рефа в свойстве `current` получает экземпляр смонтированного компонента. +- Когда атрибут `ref` используется с классовым компонентом, свойство `current` объекта-рефа получает экземпляр смонтированного компонента. - **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаётся экземпляров. Представленные ниже примеры демонстрируют отличия в зависимости от типа узла. From 2ed7f477f97026fcd843f1e19b8fc714d3cf4393 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:35:44 +0300 Subject: [PATCH 51/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 7bb956340..0ae71ffc1 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -61,7 +61,7 @@ const node = this.myRef.current; Значение рефа отличается в зависимости от типа узла: -- Когда атрибут `ref` используется с HTML-элементом, реф созданный в конструкторе с помощью `React.createRef()` получает в свойстве `current` соответствующий DOM-элемент. +- Когда атрибут `ref` используется с HTML-элементом, свойство `current` созданного рефа в конструкторе с помощью `React.createRef()` получает соответствующий DOM-элемент. - Когда атрибут `ref` используется с классовым компонентом, свойство `current` объекта-рефа получает экземпляр смонтированного компонента. - **Нельзя использовать `ref` атрибут с функциональными компонентами**, потому что для них не создаётся экземпляров. From a5970c4d99778b94c220629dcdc95cd7395c7098 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 10 Mar 2019 23:35:56 +0300 Subject: [PATCH 52/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 0ae71ffc1..70f7d18f4 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -53,7 +53,7 @@ class MyComponent extends React.Component { ### Доступ к рефам {#accessing-refs} -Когда реф передается элементу в методе `render`, ссылка на данный узел становится доступной через атрибут `current` в рефе. +Когда реф передаётся элементу в методе `render`, ссылка на данный узел доступна через свойство рефа `current`. ```javascript const node = this.myRef.current; From 63806f9bb42d8a12b6ad739cca956671226cd531 Mon Sep 17 00:00:00 2001 From: Pavel Smolin Date: Sun, 10 Mar 2019 23:39:48 +0300 Subject: [PATCH 53/56] Fix PR comment --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 70f7d18f4..541c7c8a7 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -11,7 +11,7 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Рефы дают возможность получить доступ к DOM-узлам или React-элементам, созданным в методе `render`. +Рефы дают возможность получить доступ к DOM-узлам или React-элементам, созданным в рендер-методе. В обычном потоке данных React родительские компоненты могут взаимодействовать с дочерними только через [пропсы](/docs/components-and-props.html). Чтобы модифицировать потомка, вы должны заново отрендерить его с новыми пропсами. Тем не менее, могут возникать ситуации, когда вам требуется императивно изменить дочерний элемент, обойдя обычный поток данных. Подлежащий изменениям дочерний элемент может быть как React-компонентом, так и DOM-элементом. React предоставляет лазейку для обоих случаев. From 3123c69beb34122d9945bee79d7de5549322093b Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:43:48 +0300 Subject: [PATCH 54/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 541c7c8a7..d5537c463 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -202,7 +202,7 @@ function CustomTextInput(props) { По возможности, мы советуем избегать передачи DOM-узлов, но это может быть полезной лазейкой. Заметим, что данный подход требует добавления кода в дочерний компонент. Если у вас нет никакого контроля над реализацией дочернего компонента, последним вариантом является использование [`findDOMNode()`](/docs/react-dom.html#finddomnode), но такое решение не рекомендуется и не поддерживается в [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). -### Колбэк рефы {#callback-refs} +### Колбэк-рефы {#callback-refs} Кроме того, React поддерживает другой способ определения рефов, который называется «колбэк-рефы» и предоставляет более полный контроль над их присвоением и сбросом. From f233a321093ffc6770c6d8688a8e4818caf995d2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:44:00 +0300 Subject: [PATCH 55/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index d5537c463..6eef4078f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -208,7 +208,7 @@ function CustomTextInput(props) { Вместо того, чтобы передавать атрибут `ref` созданный с помощью `createRef()`, вы можете передать функцию. Данная функция получит экземпляр React-компонента или HTML DOM-элемент в качестве аргумента, которые потом могут быть сохранены или доступны в любом другом месте. -Представленный ниже пример реализует общий паттерн: использование `ref` колбэка для хранения ссылки на DOM-узел в свойстве экземпляра. +Представленный ниже пример реализует общий паттерн: использование колбэка в `ref` для хранения ссылки на DOM-узел в свойстве экземпляра. ```javascript{5,7-9,11-14,19,29,34} class CustomTextInput extends React.Component { From 6c1acd4718e205f465cf567d64aea99f6e57b86f Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 23:44:17 +0300 Subject: [PATCH 56/56] Update content/docs/refs-and-the-dom.md Co-Authored-By: SmolinPavel --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6eef4078f..3a7f1b651 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -233,7 +233,7 @@ class CustomTextInput extends React.Component { } render() { - // Используем `ref` колбэк, чтобы сохранить ссылку на DOM-элемент + // Используем колбэк в `ref`, чтобы сохранить ссылку на DOM-элемент // поля текстового ввода в поле экземпляра (например, this.textInput). return (