From 3aca7f6e76ff3a768f5f496e50023e5f7518d219 Mon Sep 17 00:00:00 2001 From: echobrain Date: Fri, 15 Feb 2019 09:38:19 +0300 Subject: [PATCH 01/23] added basic translation of "Portals" --- content/docs/portals.md | 80 ++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 650121396..ac7d3d51b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -1,24 +1,24 @@ --- id: portals -title: Portals +title: Порталы permalink: docs/portals.html --- -Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. +Порталы дают отличный способ рендера дочерних элементов в DOM узел, который находится вне DOM иерархии родительского компонента. ```js ReactDOM.createPortal(child, container) ``` -The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element. +Первый аргумент (`child`) — это [любой React компонент, который может быть отрендерен](/docs/react-component.html#render), такой как элемент, строка или фрагмент. Следующий аргумент (`container`) — это DOM элемент. -## Usage {#usage} +## Применение {#usage} -Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node: +Обычно, когда вы возвращаете элемент из render-метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: ```js{4,6} render() { - // React mounts a new div and renders the children into it + // React монтирует новый div и рендерит в него потомка return (
{this.props.children} @@ -27,12 +27,12 @@ render() { } ``` -However, sometimes it's useful to insert a child into a different location in the DOM: +Но иногда бывает полезным иметь возможность поместить потомка в другое место в DOM: ```js{6} render() { - // React does *not* create a new div. It renders the children into `domNode`. - // `domNode` is any valid DOM node, regardless of its location in the DOM. + // React *не* создает новый div. Он рендерит потомка в `domNode`. + // `domNode` — это любой валидный DOM узел, находящийся в любом месте DOM. return ReactDOM.createPortal( this.props.children, domNode @@ -40,21 +40,21 @@ render() { } ``` -A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips. +Типовой случай применения порталов — когда в родительском компоненте заданы стили `overflow: hidden` или `z-index`, но вам нужно чтобы ребенок визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки. -> Note: +> Примечание: > -> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important. +> При работе с порталами, помните, что [управление фокусом при помощи клавиатуры](/docs/accessibility.html#programmatically-managing-focus) становится очень важным. > -> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). +> Для модальных диалогов, убедитесь, что все могут взаимодействовать с ними, следуя [практикам разработки модальных окон WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). -[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd) +[**Попробовать на CodePen**](https://codepen.io/gaearon/pen/yzMaBd) -## Event Bubbling Through Portals {#event-bubbling-through-portals} +## Всплытие событий через порталы {#event-bubbling-through-portals} -Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*. +Несмотря на то что портал может находиться в любом месте DOM дерева, он ведёт себя как обычный React компонент во всех других случаях. Свойства, такие как context, работают одинаково, независимо от того, является ли потомок порталом, так как портал все еще находится в *React дереве* независимо от положения в *DOM дереве*. -This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure: +Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться на родителей в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM дереве*. Представим следующую HTML структуру: ```html @@ -65,10 +65,10 @@ This includes event bubbling. An event fired from inside a portal will propagate ``` -A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`. +`Родительский` компонент в `#app-root` будет в состоянии поймать непойманное всплывающее событие из соседнего узла `#modal-root`. ```js{28-31,42-49,53,61-63,70-71,74} -// These two containers are siblings in the DOM +// Это два соседних контейнера в DOM const appRoot = document.getElementById('app-root'); const modalRoot = document.getElementById('modal-root'); @@ -79,14 +79,14 @@ class Modal extends React.Component { } componentDidMount() { - // The portal element is inserted in the DOM tree after - // the Modal's children are mounted, meaning that children - // will be mounted on a detached DOM node. If a child - // component requires to be attached to the DOM tree - // immediately when mounted, for example to measure a - // DOM node, or uses 'autoFocus' in a descendant, add - // state to Modal and only render the children when Modal - // is inserted in the DOM tree. + // Элемент портала добавляется в DOM дерево после того как + // потомки компонента Modal смонтированы, это значит, + // что потомки будут монтироваться на отдельном DOM узле. + // Если дочерний компонент должен быть связан с DOM деревом + // сразу при подключении, например, для замеров DOM узла, + // или вызова в потомке 'autoFocus', добавьте в компонент Modal + // состояние и рендерите потомков только тогда, когда + // компонент Modal уже добавлен в DOM дерево. modalRoot.appendChild(this.el); } @@ -110,9 +110,9 @@ class Parent extends React.Component { } handleClick() { - // This will fire when the button in Child is clicked, - // updating Parent's state, even though button - // is not direct descendant in the DOM. + // Будет вызвана при клике на кнопку в компоненте Child, + // обновляя состояние компонента Parent, несмотря на то, + // что кнопка не является прямым потомком в DOM. this.setState(state => ({ clicks: state.clicks + 1 })); @@ -121,12 +121,12 @@ class Parent extends React.Component { render() { return (
-

Number of clicks: {this.state.clicks}

+

Количество кликов: {this.state.clicks}

- Open up the browser DevTools - to observe that the button - is not a child of the div - with the onClick handler. + Откройте DevTools браузера, + чтобы убедиться, что кнопка + не является потомком блока div + c onClick обработчиком.

@@ -137,11 +137,11 @@ class Parent extends React.Component { } function Child() { - // The click event on this button will bubble up to parent, - // because there is no 'onClick' attribute defined + // Событие клика на этой кнопке будет всплывать вверх к родителю, + // так как здесь не определен атрибут 'onClick' return (
- +
); } @@ -149,6 +149,6 @@ function Child() { ReactDOM.render(, appRoot); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE) +[**Попробовать на CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `` component, the parent can capture its events regardless of whether it's implemented using portals. +Перехват событий, всплывающих от портала к родительскому компоненту, позволяет разрабатывать более гибкие абстракции, которые по своей сути не завязаны на порталах. Например, если вы отрендерели компонент ``, родитель может ловить его события, независимо от того, реализован ли он с использованием порталов. \ No newline at end of file From a8a93e3c95aaa82be7d6d10c17a029ecd3857615 Mon Sep 17 00:00:00 2001 From: echobrain Date: Sat, 16 Feb 2019 14:45:29 +0300 Subject: [PATCH 02/23] translation fixes --- content/docs/portals.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index ac7d3d51b..2a7f69bb5 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -4,7 +4,7 @@ title: Порталы permalink: docs/portals.html --- -Порталы дают отличный способ рендера дочерних элементов в DOM узел, который находится вне DOM иерархии родительского компонента. +Порталы позволяют рендерить дочерние элементы в DOM узел, который находится вне DOM иерархии родительского компонента. ```js ReactDOM.createPortal(child, container) @@ -14,11 +14,11 @@ ReactDOM.createPortal(child, container) ## Применение {#usage} -Обычно, когда вы возвращаете элемент из render-метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: +Обычно, когда вы возвращаете элемент из рендер метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: ```js{4,6} render() { - // React монтирует новый div и рендерит в него потомка + // React монтирует новый div и рендерит в него дочерние элементы return (
{this.props.children} @@ -31,8 +31,8 @@ render() { ```js{6} render() { - // React *не* создает новый div. Он рендерит потомка в `domNode`. - // `domNode` — это любой валидный DOM узел, находящийся в любом месте DOM. + // React *не* создает новый div. Он рендерит дочерние элементы в `domNode`. + // `domNode` — это любой валидный DOM узел, находящийся в любом месте в DOM. return ReactDOM.createPortal( this.props.children, domNode @@ -40,11 +40,11 @@ render() { } ``` -Типовой случай применения порталов — когда в родительском компоненте заданы стили `overflow: hidden` или `z-index`, но вам нужно чтобы ребенок визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки. +Типовой случай применения порталов — когда в родительском компоненте заданы стили `overflow: hidden` или `z-index`, но вам нужно чтобы дочерний элемент визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки. > Примечание: > -> При работе с порталами, помните, что [управление фокусом при помощи клавиатуры](/docs/accessibility.html#programmatically-managing-focus) становится очень важным. +> При работе с порталами, помните, что нужно уделить внимание [управлению фокусом при помощи клавиатуры](/docs/accessibility.html#programmatically-managing-focus). > > Для модальных диалогов, убедитесь, что все могут взаимодействовать с ними, следуя [практикам разработки модальных окон WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). @@ -52,9 +52,9 @@ render() { ## Всплытие событий через порталы {#event-bubbling-through-portals} -Несмотря на то что портал может находиться в любом месте DOM дерева, он ведёт себя как обычный React компонент во всех других случаях. Свойства, такие как context, работают одинаково, независимо от того, является ли потомок порталом, так как портал все еще находится в *React дереве* независимо от положения в *DOM дереве*. +Несмотря на то, что портал может находиться в любом месте DOM дерева, во всех других случаях он ведёт себя так же как и обычный React компонент. Свойства, такие как контекст, работают одинаково, независимо от того, является ли потомок порталом, так как портал все ещё находится в *React дереве* независимо от положения в *DOM дереве*. -Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться на родителей в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM дереве*. Представим следующую HTML структуру: +Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM дереве*. Представим следующую HTML структуру: ```html @@ -65,7 +65,7 @@ render() { ``` -`Родительский` компонент в `#app-root` будет в состоянии поймать непойманное всплывающее событие из соседнего узла `#modal-root`. +`Родительский` компонент в `#app-root` будет в состоянии поймать неперехваченное всплывающее событие из соседнего узла `#modal-root`. ```js{28-31,42-49,53,61-63,70-71,74} // Это два соседних контейнера в DOM @@ -79,8 +79,8 @@ class Modal extends React.Component { } componentDidMount() { - // Элемент портала добавляется в DOM дерево после того как - // потомки компонента Modal смонтированы, это значит, + // Элемент портала добавляется в DOM дерево после того как + // потомки компонента Modal будут смонтированы, это значит, // что потомки будут монтироваться на отдельном DOM узле. // Если дочерний компонент должен быть связан с DOM деревом // сразу при подключении, например, для замеров DOM узла, @@ -138,7 +138,7 @@ class Parent extends React.Component { function Child() { // Событие клика на этой кнопке будет всплывать вверх к родителю, - // так как здесь не определен атрибут 'onClick' + // так как здесь не определён атрибут 'onClick' return (
@@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Попробовать на CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Перехват событий, всплывающих от портала к родительскому компоненту, позволяет разрабатывать более гибкие абстракции, которые по своей сути не завязаны на порталах. Например, если вы отрендерели компонент ``, родитель может ловить его события, независимо от того, реализован ли он с использованием порталов. \ No newline at end of file +Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать более гибкие абстракции, которые по своей сути не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. \ No newline at end of file From 18c77b6f910d8253f9896668e67060822bc7120a Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sat, 16 Feb 2019 15:58:47 +0300 Subject: [PATCH 03/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 2a7f69bb5..95c873068 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -31,7 +31,7 @@ render() { ```js{6} render() { - // React *не* создает новый div. Он рендерит дочерние элементы в `domNode`. + // React *не* создаёт новый div. Он рендерит дочерние элементы в `domNode`. // `domNode` — это любой валидный DOM узел, находящийся в любом месте в DOM. return ReactDOM.createPortal( this.props.children, @@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Попробовать на CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать более гибкие абстракции, которые по своей сути не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. \ No newline at end of file +Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать более гибкие абстракции, которые по своей сути не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. From 305c8bb4ddbb949c80c4ece6a55b97023678d37a Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sat, 16 Feb 2019 16:04:51 +0300 Subject: [PATCH 04/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 95c873068..027c1fac2 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -79,7 +79,7 @@ class Modal extends React.Component { } componentDidMount() { - // Элемент портала добавляется в DOM дерево после того как + // Элемент портала добавляется в DOM дерево после того, как // потомки компонента Modal будут смонтированы, это значит, // что потомки будут монтироваться на отдельном DOM узле. // Если дочерний компонент должен быть связан с DOM деревом From 90b0b525461add7f8726c86af1b3c50398f36ba5 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Sat, 16 Feb 2019 16:06:59 +0300 Subject: [PATCH 05/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 027c1fac2..9dda61f58 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -52,7 +52,7 @@ render() { ## Всплытие событий через порталы {#event-bubbling-through-portals} -Несмотря на то, что портал может находиться в любом месте DOM дерева, во всех других случаях он ведёт себя так же как и обычный React компонент. Свойства, такие как контекст, работают одинаково, независимо от того, является ли потомок порталом, так как портал все ещё находится в *React дереве* независимо от положения в *DOM дереве*. +Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве* независимо от положения в *DOM-дереве*. Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM дереве*. Представим следующую HTML структуру: From 07dbc5e539243a217699dedc3f74acbe71bb2e4a Mon Sep 17 00:00:00 2001 From: echobrain Date: Sat, 16 Feb 2019 16:15:03 +0300 Subject: [PATCH 06/23] dashes --- content/docs/portals.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 9dda61f58..8212a9470 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -4,13 +4,13 @@ title: Порталы permalink: docs/portals.html --- -Порталы позволяют рендерить дочерние элементы в DOM узел, который находится вне DOM иерархии родительского компонента. +Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента. ```js ReactDOM.createPortal(child, container) ``` -Первый аргумент (`child`) — это [любой React компонент, который может быть отрендерен](/docs/react-component.html#render), такой как элемент, строка или фрагмент. Следующий аргумент (`container`) — это DOM элемент. +Первый аргумент (`child`) — это [любой React компонент, который может быть отрендерен](/docs/react-component.html#render), такой как элемент, строка или фрагмент. Следующий аргумент (`container`) — это DOM-элемент. ## Применение {#usage} @@ -32,7 +32,7 @@ render() { ```js{6} render() { // React *не* создаёт новый div. Он рендерит дочерние элементы в `domNode`. - // `domNode` — это любой валидный DOM узел, находящийся в любом месте в DOM. + // `domNode` — это любой валидный DOM-узел, находящийся в любом месте в DOM. return ReactDOM.createPortal( this.props.children, domNode @@ -54,7 +54,7 @@ render() { Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве* независимо от положения в *DOM-дереве*. -Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM дереве*. Представим следующую HTML структуру: +Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML структуру: ```html @@ -79,14 +79,14 @@ class Modal extends React.Component { } componentDidMount() { - // Элемент портала добавляется в DOM дерево после того, как + // Элемент портала добавляется в DOM-дерево после того, как // потомки компонента Modal будут смонтированы, это значит, - // что потомки будут монтироваться на отдельном DOM узле. - // Если дочерний компонент должен быть связан с DOM деревом - // сразу при подключении, например, для замеров DOM узла, + // что потомки будут монтироваться на отдельном DOM-узле. + // Если дочерний компонент должен быть связан с DOM-деревом + // сразу при подключении, например, для замеров DOM-узла, // или вызова в потомке 'autoFocus', добавьте в компонент Modal // состояние и рендерите потомков только тогда, когда - // компонент Modal уже добавлен в DOM дерево. + // компонент Modal уже добавлен в DOM-дерево. modalRoot.appendChild(this.el); } From f0ec1d5a6552cf06dafd81b796c3cf67987b07d6 Mon Sep 17 00:00:00 2001 From: echobrain Date: Sat, 16 Feb 2019 16:21:09 +0300 Subject: [PATCH 07/23] more dashes --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 8212a9470..b22a59451 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -54,7 +54,7 @@ render() { Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве* независимо от положения в *DOM-дереве*. -Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML структуру: +Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React-дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML-структуру: ```html From 055012db79215b0b8184dc4a188b00373f94db45 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:27:19 +0300 Subject: [PATCH 08/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index b22a59451..253497996 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -10,7 +10,7 @@ permalink: docs/portals.html ReactDOM.createPortal(child, container) ``` -Первый аргумент (`child`) — это [любой React компонент, который может быть отрендерен](/docs/react-component.html#render), такой как элемент, строка или фрагмент. Следующий аргумент (`container`) — это DOM-элемент. +Первый аргумент (`child`) — это [любой React-компонент, который может быть отрендерен](/docs/react-component.html#render), такой как элемент, строка или фрагмент. Следующий аргумент (`container`) — это DOM-элемент. ## Применение {#usage} From 35b84784fd39842f6a77afe4dc2efe586f9af685 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:28:19 +0300 Subject: [PATCH 09/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 253497996..84e1165bd 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -14,7 +14,7 @@ ReactDOM.createPortal(child, container) ## Применение {#usage} -Обычно, когда вы возвращаете элемент из рендер метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: +Обычно, когда вы возвращаете элемент из рендер-метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: ```js{4,6} render() { From dd8e9d8ffd584dffc9a60f6cb452010555c4e91c Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:29:27 +0300 Subject: [PATCH 10/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 84e1165bd..80cc32fc2 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -27,7 +27,7 @@ render() { } ``` -Но иногда бывает полезным иметь возможность поместить потомка в другое место в DOM: +Но иногда требуется поместить потомка в другое место в DOM: ```js{6} render() { From d1020c7b5aecb1001d7465c23ae5f84bb9ce4543 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:30:12 +0300 Subject: [PATCH 11/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 80cc32fc2..f428b7d0c 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -52,7 +52,7 @@ render() { ## Всплытие событий через порталы {#event-bubbling-through-portals} -Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве* независимо от положения в *DOM-дереве*. +Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React-компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве*, несмотря на положение в *DOM-дереве*. Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React-дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML-структуру: From 6fc68b8f8db137248c6e5fd90d9aeb50dcdc04fb Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:31:00 +0300 Subject: [PATCH 12/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index f428b7d0c..e8970ea5c 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -65,7 +65,7 @@ render() { ``` -`Родительский` компонент в `#app-root` будет в состоянии поймать неперехваченное всплывающее событие из соседнего узла `#modal-root`. +`Родительский` компонент в `#app-root` сможет поймать неперехваченное всплывающее событие из соседнего узла `#modal-root`. ```js{28-31,42-49,53,61-63,70-71,74} // Это два соседних контейнера в DOM From 5dcff40400ba46adcb2b132409297f0e7791226e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 17 Feb 2019 11:31:37 +0300 Subject: [PATCH 13/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index e8970ea5c..a28cbebf4 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -126,7 +126,7 @@ class Parent extends React.Component { Откройте DevTools браузера, чтобы убедиться, что кнопка не является потомком блока div - c onClick обработчиком. + c обработчиком onClick.

From ef649bddd3746e23d57bf095f2db837d68401008 Mon Sep 17 00:00:00 2001 From: echobrain Date: Sun, 17 Feb 2019 11:55:18 +0300 Subject: [PATCH 14/23] less words in resume --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index b22a59451..d90f2419b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Попробовать на CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать более гибкие абстракции, которые по своей сути не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. +Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать абстракции, которые не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. From 4655972fd70a34e40c0ce696bcfeb06c03eba9fd Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:28:33 +0300 Subject: [PATCH 15/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 3b8dff3b0..8e22763b4 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -46,7 +46,7 @@ render() { > > При работе с порталами, помните, что нужно уделить внимание [управлению фокусом при помощи клавиатуры](/docs/accessibility.html#programmatically-managing-focus). > -> Для модальных диалогов, убедитесь, что все могут взаимодействовать с ними, следуя [практикам разработки модальных окон WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). +> Для модальных диалогов, убедитесь, что любой пользователь будет способен взаимодействовать с ними, следуя [практикам разработки модальных окон WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). [**Попробовать на CodePen**](https://codepen.io/gaearon/pen/yzMaBd) From 44d4834706838e73fdbd311727226e25d92f906f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:33:56 +0300 Subject: [PATCH 16/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 8e22763b4..3c8ac6b3b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -54,7 +54,7 @@ render() { Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React-компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве*, несмотря на положение в *DOM-дереве*. -Так же работает и всплытие событий. Событие, выброшенное изнутри портала, будет распространяться к родителям в содержащем *React-дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML-структуру: +Так же работает и всплытие событий. Событие, сгенерированное изнутри портала, будет распространяться к родителям в содержащем *React-дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML-структуру: ```html From 6609de74cc9efc49b9a9d00c6e64c6c17acb315f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:34:22 +0300 Subject: [PATCH 17/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 3c8ac6b3b..93fe0e2ef 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -52,7 +52,7 @@ render() { ## Всплытие событий через порталы {#event-bubbling-through-portals} -Несмотря на то, что портал может находиться в любом месте DOM-дерева, во всех других случаях он ведёт себя как обычный React-компонент. Такие возможности, как контекст, работают одинаково, независимо от того, является ли потомок порталом, поскольку портал все ещё находится в *React-дереве*, несмотря на положение в *DOM-дереве*. +Как уже было сказано, портал может находиться в любом месте DOM-дерева. Несмотря на это, во всех других аспектах он ведёт себя как обычный React-компонент. Такие возможности, как контекст, работают привычным образом, даже если потомок является порталом, поскольку сам портал все ещё находится в *React-дереве*, несмотря на его расположение в *DOM-дереве*. Так же работает и всплытие событий. Событие, сгенерированное изнутри портала, будет распространяться к родителям в содержащем *React-дереве*, даже если эти элементы не являются родительскими в *DOM-дереве*. Представим следующую HTML-структуру: From 00c7675a18aac6e62a07607a67293af490ba27d0 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:37:40 +0300 Subject: [PATCH 18/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 93fe0e2ef..841199623 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -82,7 +82,7 @@ class Modal extends React.Component { // Элемент портала добавляется в DOM-дерево после того, как // потомки компонента Modal будут смонтированы, это значит, // что потомки будут монтироваться на отдельном DOM-узле. - // Если дочерний компонент должен быть связан с DOM-деревом + // Если дочерний компонент должен быть присоединён к DOM-дереву // сразу при подключении, например, для замеров DOM-узла, // или вызова в потомке 'autoFocus', добавьте в компонент Modal // состояние и рендерите потомков только тогда, когда From 0a217b8223071a7dada74e67779e4918abcf53b9 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:42:49 +0300 Subject: [PATCH 19/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 841199623..3ceaa71ae 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -81,7 +81,7 @@ class Modal extends React.Component { componentDidMount() { // Элемент портала добавляется в DOM-дерево после того, как // потомки компонента Modal будут смонтированы, это значит, - // что потомки будут монтироваться на отдельном DOM-узле. + // что потомки будут монтироваться на неприсоединённом DOM-узле. // Если дочерний компонент должен быть присоединён к DOM-дереву // сразу при подключении, например, для замеров DOM-узла, // или вызова в потомке 'autoFocus', добавьте в компонент Modal From e0e0cfe7ea69f5ed03bf941644cb842a98b6050e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:43:14 +0300 Subject: [PATCH 20/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 3ceaa71ae..5765040e0 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -86,7 +86,7 @@ class Modal extends React.Component { // сразу при подключении, например, для замеров DOM-узла, // или вызова в потомке 'autoFocus', добавьте в компонент Modal // состояние и рендерите потомков только тогда, когда - // компонент Modal уже добавлен в DOM-дерево. + // компонент Modal уже вставлен в DOM-дерево. modalRoot.appendChild(this.el); } From 5fb06b22eee020e3575b22689b93261f2370455b Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:43:28 +0300 Subject: [PATCH 21/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 5765040e0..a063a810b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -110,7 +110,7 @@ class Parent extends React.Component { } handleClick() { - // Будет вызвана при клике на кнопку в компоненте Child, + // Эта функция будет вызвана при клике на кнопку в компоненте Child, // обновляя состояние компонента Parent, несмотря на то, // что кнопка не является прямым потомком в DOM. this.setState(state => ({ From 6c7b5644cc0bfe5a1da642c7e5cb2c6c78ea4b0e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:43:49 +0300 Subject: [PATCH 22/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index a063a810b..213764ea7 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -141,7 +141,7 @@ function Child() { // так как здесь не определён атрибут 'onClick' return (
- +
); } From 92486d7e7322c7a00e6ba7491cf6d82b3ae7b2a0 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 27 Feb 2019 08:45:39 +0300 Subject: [PATCH 23/23] Update content/docs/portals.md Co-Authored-By: echobrain --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 213764ea7..34562d519 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Попробовать на CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать абстракции, которые не привязаны к порталам. Например, если вы отрендерили компонент ``, родитель может ловить его события, независимо от того, был ли он реализован с использованием порталов. +Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать абстракции, которые не спроектированны специально под порталы. Например, вы отрендерили компонент ``. Тогда его события могут быть перехвачены родительским компонентом, вне зависимости от того, был ли `` реализован с использованием порталов или без них.