From e3e5d1f0fd12b49656d05c6d286749dae5b967e3 Mon Sep 17 00:00:00 2001 From: minatko Date: Wed, 13 Feb 2019 07:18:29 +0300 Subject: [PATCH 01/13] Translation of Forwarding Refs --- content/docs/forwarding-refs.md | 64 +++++++++---------- .../customized-display-name.js | 4 +- examples/forwarding-refs/fancy-button-ref.js | 8 +-- .../fancy-button-simple-ref.js | 2 +- examples/forwarding-refs/fancy-button.js | 4 +- examples/forwarding-refs/log-props-after.js | 8 +-- examples/forwarding-refs/log-props-before.js | 4 +- 7 files changed, 47 insertions(+), 47 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..80aa39410 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,76 +1,76 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Перенаправление рефов permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Как правило, большинство компонентов в приложении не используют эту возможность, но в отдельных случаях, особенно при создании библиотек, она может оказаться полезной. Рассмотрим в каких ситуациях она чаще всего применяется. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: +Допустим, у нас есть компонент `FancyButton`, который рендерит нативный DOM-элемент `button`: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +В React детали реализации, включая отображение на экране, скрыты внутри компонентов. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Несмотря на то, что такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например `FeedStory` или `Comment`, она может быть неудобной в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`. Роль таких компонентов в приложении, как правило, аналогична роли обычных DOM-элементов `button` или `input`, и без доступа к их DOM-узлам не получится управлять фокусом, выделением и анимациями. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать его (иначе говоря, «перенаправить») одному из дочерних компонентов.** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +В данном примере мы используем `React.forwardRef` в компоненте `FancyButton`, чтобы получить реф и передать его в дочерний DOM-элемент `button`. `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +Таким образом, когда мы будем применять `FancyButton` в других компонентах, мы сможем получить реф находящегося в нём DOM-узла `button` и использовать его так же, как если бы мы рендерили непосредственно `button`. -Here is a step-by-step explanation of what happens in the above example: +Рассмотрим пошагово, что же просходит в этом примере: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to ` )); -// You can now get a ref directly to the DOM button: +// Теперь реф будет указывать непосредственно на DOM-узел button: const ref = React.createRef(); Click me!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..825d56bdd 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// Вместо экспорта FancyButton, мы экспортируем LogProps. +// Рендериться при этом будет FancyButton. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..4ccfc99a9 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // Передаём в качестве рефа проп "forwardedRef" // highlight-next-line return ; } } - // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // Обратите внимание, что React.forwardRef передает "ref" вторым аргументом. + // Мы можем передать его дальше как проп, например, "forwardedRef", + // а потом привязать его к компоненту. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ; diff --git a/examples/forwarding-refs/log-props-before.js b/examples/forwarding-refs/log-props-before.js index a507e818b..5d384bf74 100644 --- a/examples/forwarding-refs/log-props-before.js +++ b/examples/forwarding-refs/log-props-before.js @@ -2,8 +2,8 @@ function logProps(WrappedComponent) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('old props:', prevProps); - console.log('new props:', this.props); + console.log('старые пропсы:', prevProps); + console.log('новые пропсы:', this.props); } render() { From 5d11a79664af920ad2a2b2a12593def4ba47baab Mon Sep 17 00:00:00 2001 From: minatko Date: Wed, 13 Feb 2019 07:59:13 +0300 Subject: [PATCH 02/13] replace noun with verb --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 80aa39410..e83e01784 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -41,7 +41,7 @@ permalink: docs/forwarding-refs.html **Если вы впервые использовали `forwardRef` в компоненте библиотеки, то это изменение нужно считать критическим, а новую версию следует сделать мажорной.** Причина этого в том, что, скорее всего, поведение этого компонента заметно изменится (например, изменится тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. -По этой же причине мы не рекомендуем делать вызов `React.forwardRef` только при условии, что эта функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. +По этой же причине мы не рекомендуем вызывать `React.forwardRef` только при условии, что эта функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. ## Перенаправление рефов в компонентах высшего порядка {#forwarding-refs-in-higher-order-components} From caf32e5039a6fbd8c9a6c7ea06fcf8f6e731fb88 Mon Sep 17 00:00:00 2001 From: minatko Date: Wed, 13 Feb 2019 13:56:10 +0300 Subject: [PATCH 03/13] Apply suggestions from code review --- content/docs/forwarding-refs.md | 16 ++++++++-------- examples/forwarding-refs/fancy-button-ref.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index e83e01784..8b541f6bd 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,16 +4,16 @@ title: Перенаправление рефов permalink: docs/forwarding-refs.html --- -Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Как правило, большинство компонентов в приложении не используют эту возможность, но в отдельных случаях, особенно при создании библиотек, она может оказаться полезной. Рассмотрим в каких ситуациях она чаще всего применяется. +Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно при создании библиотек и в некоторых других случаях. Рассмотрим наиболее частые сценарии. ## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components} Допустим, у нас есть компонент `FancyButton`, который рендерит нативный DOM-элемент `button`: `embed:forwarding-refs/fancy-button-simple.js` -В React детали реализации, включая отображение на экране, скрыты внутри компонентов. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. +React-компоненты скрывают свои детали реализации, в том числе отображаемый вывод. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. -Несмотря на то, что такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например `FeedStory` или `Comment`, она может быть неудобной в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`. Роль таких компонентов в приложении, как правило, аналогична роли обычных DOM-элементов `button` или `input`, и без доступа к их DOM-узлам не получится управлять фокусом, выделением и анимациями. +Несмотря на то, что в компонентах, описывающих часть приложения, например `FeedStory` или `Comment`, желательна такая инкапсуляция, она может быть неудобной в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`. Они используются в приложении подобно обычным DOM-элементам `button` или `input`, и без доступа к их DOM-узлам не получится управлять фокусом, выделением и анимациями. **Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать его (иначе говоря, «перенаправить») одному из дочерних компонентов.** @@ -23,7 +23,7 @@ permalink: docs/forwarding-refs.html Таким образом, когда мы будем применять `FancyButton` в других компонентах, мы сможем получить реф находящегося в нём DOM-узла `button` и использовать его так же, как если бы мы рендерили непосредственно `button`. -Рассмотрим пошагово, что же просходит в этом примере: +Рассмотрим этот пример пошагово: 1. Мы создаём [реф](/docs/refs-and-the-dom.html), вызвав `React.createRef` и записываем его в переменную `ref`. 1. Мы передаём переменную `ref` в ``, указывая её в JSX-атрибуте. @@ -39,19 +39,19 @@ permalink: docs/forwarding-refs.html ## Примечание для разработчиков библиотек компонентов {#note-for-component-library-maintainers} -**Если вы впервые использовали `forwardRef` в компоненте библиотеки, то это изменение нужно считать критическим, а новую версию следует сделать мажорной.** Причина этого в том, что, скорее всего, поведение этого компонента заметно изменится (например, изменится тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. +**Если вы впервые использовали `forwardRef` в компоненте библиотеки, то это изменение нужно считать обратно несовместимым, а новую версию следует сделать мажорной.** Причина этого в том, что, скорее всего, поведение этого компонента заметно изменится (например, поменяются тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. -По этой же причине мы не рекомендуем вызывать `React.forwardRef` только при условии, что эта функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. +По этой же причине мы не рекомендуем вызывать `React.forwardRef` только если функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. ## Перенаправление рефов в компонентах высшего порядка {#forwarding-refs-in-higher-order-components} -Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (или HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль: +Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (так же известных как HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль: `embed:forwarding-refs/log-props-before.js` Компонент высшего порядка `logProps` передаёт все пропсы в компонент, который он оборачивает, так что рендерить они будут одно и то же. С его помощью мы будем выводить в консоль все пропсы, переданные в наш компонент с кнопкой: `embed:forwarding-refs/fancy-button.js` -Обратите внимание, что в этом примере не будут передаваться рефы. Так происходит потому, что `ref` — это не проп. React особенным образом обрабатывает `ref` и `key`. Если вы укажите реф для HOC, он привяжется к ближайшему к корню контейнера, а не к переданному в HOC компоненту. +Обратите внимание, что в этом примере не будут передаваться рефы. Так происходит потому, что `ref` это не проп. Подобно `key`, React обрабатывает `ref` особым образом. Если вы укажите реф для HOC, он привяжется к ближайшему к корню контейнера, а не к переданному в HOC компоненту. Следовательно, рефы, предназначенные для компонента `FancyButton`, окажутся привязанными к компоненту `LogProps`: `embed:forwarding-refs/fancy-button-ref.js` diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js index 53e215939..6e519d817 100644 --- a/examples/forwarding-refs/fancy-button-ref.js +++ b/examples/forwarding-refs/fancy-button-ref.js @@ -5,7 +5,7 @@ const ref = React.createRef(); // Компонент FancyButton, который мы импортировали — это HOC LogProps. // Несмотря на то, что рендерят они одно и то же, -// реф в данном случае будт указывать на LogProps, а не на сам FancyButton! +// реф в данном случае будет указывать на LogProps, а не на сам FancyButton! // Это значит, что мы не сможем, например, вызвать ref.current.focus() // highlight-range{4} Date: Wed, 13 Feb 2019 15:42:21 +0300 Subject: [PATCH 04/13] some more changes --- content/docs/forwarding-refs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 8b541f6bd..eac2bd2b5 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,7 +4,7 @@ title: Перенаправление рефов permalink: docs/forwarding-refs.html --- -Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно при создании библиотек и в некоторых других случаях. Рассмотрим наиболее частые сценарии. +Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, если вы пишите библиотеку, и в некоторых других случаях. Рассмотрим наиболее частые сценарии. ## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components} @@ -39,7 +39,7 @@ React-компоненты скрывают свои детали реализа ## Примечание для разработчиков библиотек компонентов {#note-for-component-library-maintainers} -**Если вы впервые использовали `forwardRef` в компоненте библиотеки, то это изменение нужно считать обратно несовместимым, а новую версию следует сделать мажорной.** Причина этого в том, что, скорее всего, поведение этого компонента заметно изменится (например, поменяются тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. +**Если вы впервые использовали `forwardRef` в компоненте библиотеки, то следует сделать новую версию мажорной и указать на обратную несовместимость изменений.** Причина этого в том, что, скорее всего, компонент станет вести себя заметно иначе (например, изменится тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. По этой же причине мы не рекомендуем вызывать `React.forwardRef` только если функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. From dad4318a0556032cca0b250bb461f22239d5f57e Mon Sep 17 00:00:00 2001 From: minatko Date: Wed, 13 Feb 2019 19:28:26 +0300 Subject: [PATCH 05/13] typo fix --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index eac2bd2b5..bd1641536 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,7 +4,7 @@ title: Перенаправление рефов permalink: docs/forwarding-refs.html --- -Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, если вы пишите библиотеку, и в некоторых других случаях. Рассмотрим наиболее частые сценарии. +Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, если вы пишете библиотеку, и в некоторых других случаях. Рассмотрим наиболее частые сценарии. ## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components} From fcfcdd8a407160a0caacac34daf109cc89115645 Mon Sep 17 00:00:00 2001 From: minatko Date: Wed, 13 Feb 2019 20:53:15 +0300 Subject: [PATCH 06/13] Fix some dense phrases. --- content/docs/forwarding-refs.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index bd1641536..d3dc438c4 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -13,7 +13,7 @@ permalink: docs/forwarding-refs.html React-компоненты скрывают свои детали реализации, в том числе отображаемый вывод. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. -Несмотря на то, что в компонентах, описывающих часть приложения, например `FeedStory` или `Comment`, желательна такая инкапсуляция, она может быть неудобной в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`. Они используются в приложении подобно обычным DOM-элементам `button` или `input`, и без доступа к их DOM-узлам не получится управлять фокусом, выделением и анимациями. +Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Управлять фокусом, выделением и анимациями не получится без доступа к DOM-узлам элементов. **Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать его (иначе говоря, «перенаправить») одному из дочерних компонентов.** @@ -41,8 +41,7 @@ React-компоненты скрывают свои детали реализа **Если вы впервые использовали `forwardRef` в компоненте библиотеки, то следует сделать новую версию мажорной и указать на обратную несовместимость изменений.** Причина этого в том, что, скорее всего, компонент станет вести себя заметно иначе (например, изменится тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать. -По этой же причине мы не рекомендуем вызывать `React.forwardRef` только если функция определена: поведение библиотеки будет сильно меняться, и приложения ваших пользователей могут перестать работать при обновлении самого React. - +По этой же причине мы рекомендуем не вызывать `React.forwardRef` условно (то есть сперва проверяя, что эта функция определена). Это изменит поведение вашей библиотеки и приложения ваших пользователей могут перестать работать при обновлении самого React. ## Перенаправление рефов в компонентах высшего порядка {#forwarding-refs-in-higher-order-components} Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (так же известных как HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль: From 3692c0bf574e8039d1c36b15a9f79c9166bce48c Mon Sep 17 00:00:00 2001 From: minatko Date: Thu, 14 Feb 2019 10:01:55 +0300 Subject: [PATCH 07/13] I think final corrections. --- content/docs/forwarding-refs.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index d3dc438c4..ffcaf83ac 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,14 +4,14 @@ title: Перенаправление рефов permalink: docs/forwarding-refs.html --- -Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, если вы пишете библиотеку, и в некоторых других случаях. Рассмотрим наиболее частые сценарии. +Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, например, если вы пишете библиотеку. Рассмотрим наиболее частые сценарии. ## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components} Допустим, у нас есть компонент `FancyButton`, который рендерит нативный DOM-элемент `button`: `embed:forwarding-refs/fancy-button-simple.js` -React-компоненты скрывают свои детали реализации, в том числе отображаемый вывод. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. +React-компоненты скрывают свои детали реализации, в том числе результат рендеринга. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Управлять фокусом, выделением и анимациями не получится без доступа к DOM-узлам элементов. @@ -44,7 +44,7 @@ React-компоненты скрывают свои детали реализа По этой же причине мы рекомендуем не вызывать `React.forwardRef` условно (то есть сперва проверяя, что эта функция определена). Это изменит поведение вашей библиотеки и приложения ваших пользователей могут перестать работать при обновлении самого React. ## Перенаправление рефов в компонентах высшего порядка {#forwarding-refs-in-higher-order-components} -Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (так же известных как HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль: +Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (также известных как HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль: `embed:forwarding-refs/log-props-before.js` Компонент высшего порядка `logProps` передаёт все пропсы в компонент, который он оборачивает, так что рендерить они будут одно и то же. С его помощью мы будем выводить в консоль все пропсы, переданные в наш компонент с кнопкой: @@ -55,7 +55,7 @@ React-компоненты скрывают свои детали реализа Следовательно, рефы, предназначенные для компонента `FancyButton`, окажутся привязанными к компоненту `LogProps`: `embed:forwarding-refs/fancy-button-ref.js` -К счастью, мы можем явно перенаправить рефы на компонент `FancyButton` внутри HOC при помощи API `React.forwardRef`. В `React.forwardRef` передаётся функция рендеринга, которая принимает аргументы `props` и `ref` и возвращает узел React. Например: +К счастью, мы можем явно перенаправить рефы на компонент `FancyButton` внутри HOC при помощи API `React.forwardRef`. В `React.forwardRef` передаётся функция рендеринга, которая принимает аргументы `props` и `ref`, а возвращает узел React. Например: `embed:forwarding-refs/log-props-after.js` ## Изменение названия в инструментах разработки {#displaying-a-custom-name-in-devtools} From e148fd092f3cf7576381cc7921d4ec72be859606 Mon Sep 17 00:00:00 2001 From: minatko Date: Thu, 14 Feb 2019 10:16:21 +0300 Subject: [PATCH 08/13] fix --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index ffcaf83ac..ae330f090 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -13,7 +13,7 @@ permalink: docs/forwarding-refs.html React-компоненты скрывают свои детали реализации, в том числе результат рендеринга. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга. -Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Управлять фокусом, выделением и анимациями не получится без доступа к DOM-узлам элементов. +Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Чтобы управлять фокусом, выделением и анимациями этих компонентов, придётся получить доступ к их DOM-узлам. **Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать его (иначе говоря, «перенаправить») одному из дочерних компонентов.** From 34a6dc1a8efa25dc86f64cfe4e7041e06163cf91 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Feb 2019 13:45:39 +0300 Subject: [PATCH 09/13] Update content/docs/forwarding-refs.md Co-Authored-By: Heegiiny --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index ae330f090..cebb86f89 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -15,7 +15,7 @@ React-компоненты скрывают свои детали реализа Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Чтобы управлять фокусом, выделением и анимациями этих компонентов, придётся получить доступ к их DOM-узлам. -**Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать его (иначе говоря, «перенаправить») одному из дочерних компонентов.** +**Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать («перенаправить») его одному из дочерних компонентов.** В данном примере мы используем `React.forwardRef` в компоненте `FancyButton`, чтобы получить реф и передать его в дочерний DOM-элемент `button`. From a5324d0bda8d9692d592bcf7e5fedbd7e12245b8 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Feb 2019 13:45:50 +0300 Subject: [PATCH 10/13] Update content/docs/forwarding-refs.md Co-Authored-By: Heegiiny --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index cebb86f89..60f75b040 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -33,7 +33,7 @@ React-компоненты скрывают свои детали реализа >Примечание > ->Второй аргумент `ref` существует только в том случае, если вы создаёте компонент через функцию `React.forwardRef`. Функциональные или классовые компоненты, созданные без использования этой функции, не будут получать `ref` в качестве аргумента или пропа. +>Второй аргумент `ref` существует только в том случае, если вы создаёте компонент через функцию `React.forwardRef`. Обычные функциональные или классовые компоненты не получают `ref` в качестве аргумента или пропа. > >Перенаправить реф можно не только в DOM-компонент, но и в экземпляр классового компонента. From 46443526a1578c49db2bed2843d00a95a24ca353 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Feb 2019 13:46:06 +0300 Subject: [PATCH 11/13] Update content/docs/forwarding-refs.md Co-Authored-By: Heegiiny --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 60f75b040..317254587 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -50,7 +50,7 @@ React-компоненты скрывают свои детали реализа Компонент высшего порядка `logProps` передаёт все пропсы в компонент, который он оборачивает, так что рендерить они будут одно и то же. С его помощью мы будем выводить в консоль все пропсы, переданные в наш компонент с кнопкой: `embed:forwarding-refs/fancy-button.js` -Обратите внимание, что в этом примере не будут передаваться рефы. Так происходит потому, что `ref` это не проп. Подобно `key`, React обрабатывает `ref` особым образом. Если вы укажите реф для HOC, он привяжется к ближайшему к корню контейнера, а не к переданному в HOC компоненту. +Обратите внимание, что в этом примере не будут передаваться рефы. Так происходит, потому что `ref` это не проп. Подобно `key`, React обрабатывает `ref` особым образом. Если вы укажите реф для HOC, он привяжется к ближайшему к корню контейнера, а не к переданному в HOC компоненту. Следовательно, рефы, предназначенные для компонента `FancyButton`, окажутся привязанными к компоненту `LogProps`: `embed:forwarding-refs/fancy-button-ref.js` From cc51904c73a85e824747cd888a9bfc726cd8a493 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Feb 2019 13:46:17 +0300 Subject: [PATCH 12/13] Update content/docs/forwarding-refs.md Co-Authored-By: Heegiiny --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 317254587..461e697f4 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -70,6 +70,6 @@ React-компоненты скрывают свои детали реализа `embed:forwarding-refs/wrapped-component-with-function-name.js` -Можно даже назначить функции свойство `displayName` и указать в нём какой именно компонент обёрнут в HOC: +Можно даже назначить функции свойство `displayName` и указать в нём, какой именно компонент обёрнут в HOC: `embed:forwarding-refs/customized-display-name.js` From 727420959ac6e25f517abb447cbe8016a61a30fa Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Feb 2019 13:46:30 +0300 Subject: [PATCH 13/13] Update examples/forwarding-refs/customized-display-name.js Co-Authored-By: Heegiiny --- examples/forwarding-refs/customized-display-name.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/forwarding-refs/customized-display-name.js b/examples/forwarding-refs/customized-display-name.js index 0c793465b..d7a6a8c59 100644 --- a/examples/forwarding-refs/customized-display-name.js +++ b/examples/forwarding-refs/customized-display-name.js @@ -7,7 +7,7 @@ function logProps(Component) { return ; } - // Назначим этому компоненту более понятное имя в инструментах разработки. + // Дадим компоненту более понятное имя в инструментах разработки. // Например, "ForwardRef(logProps(MyComponent))" // highlight-range{1-2} const name = Component.displayName || Component.name;