From 020b62b84161a48caad49d0ef78128083d3800ef Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 14:56:31 +0900 Subject: [PATCH 01/19] =?UTF-8?q?docs/portals=20=E6=9C=AC=E6=96=87?= =?UTF-8?q?=E3=82=92=E8=A9=A6=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 47100769e..fc4f84db3 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. +第1引数 (`child`) は[React の子要素としてレンダー可能なもの](/docs/react-component.html#render)なら何でもよく、要素、文字列、フラグメントがそれに当たります。第2引数 (`container`) は DOM 要素を指定します。 -## 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,23 @@ 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) -## 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) のような機能は、たとえ子要素がポータルだろうと完全に同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 -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 +67,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` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントがキャッチされなかった場合に、それをキャッチできます。 ```js{28-31,42-49,53,61-63,70-71,74} -// These two containers are siblings in the DOM +// この 2 つのコンテナは DOM 上の兄弟要素とします const appRoot = document.getElementById('app-root'); const modalRoot = document.getElementById('modal-root'); @@ -151,4 +153,4 @@ ReactDOM.render(, appRoot); [**Try it on 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. +ポータルから浮上したイベントが親コンポーネントでキャッチできるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 From 13b2718f7b7cf2e6394864bb93af3d51b8baa66e Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 15:14:13 +0900 Subject: [PATCH 02/19] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E5=86=85?= =?UTF-8?q?=E3=81=AE=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=81=AE=E6=AE=8B?= =?UTF-8?q?=E3=82=8A=E3=82=82=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index fc4f84db3..b0d6fdec2 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -81,14 +81,11 @@ 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 に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにしましょう。 modalRoot.appendChild(this.el); } @@ -112,9 +109,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 の state を更新します。 + // たとえそのボタンが DOM 上では直系の子孫でなかったとしてもです。 this.setState(state => ({ clicks: state.clicks + 1 })); @@ -139,8 +136,8 @@ 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 (
From f530cd63e06415595485286af646ff783cfb70d9 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 15:26:57 +0900 Subject: [PATCH 03/19] =?UTF-8?q?=E8=AA=A4=E5=AD=97=E3=83=BB=E6=94=B9?= =?UTF-8?q?=E8=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index b0d6fdec2..3021005c8 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, @@ -109,8 +109,7 @@ class Parent extends React.Component { } handleClick() { - // これは Child 内のボタンがクリックされた時に発行され、 - // Parent の state を更新します。 + // これは Child 内のボタンがクリックされた時に発行され、 Parent の state を更新します。 // たとえそのボタンが DOM 上では直系の子孫でなかったとしてもです。 this.setState(state => ({ clicks: state.clicks + 1 From e2aa1c52fcd124f0202c7302985d41dee56b3a63 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 15:40:43 +0900 Subject: [PATCH 04/19] =?UTF-8?q?=E6=B0=97=E3=81=AB=E3=81=AA=E3=82=8B?= =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E8=A1=A8=E7=8F=BE=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 3021005c8..7c163fad5 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,7 +14,7 @@ ReactDOM.createPortal(child, container) ## 使い方 -通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子要素として DOM にマウントされます。 +通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子として DOM にマウントされます。 ```js{4,6} render() { @@ -40,7 +40,7 @@ render() { } ``` -典型的なポータルのユースケースは、親要素が `overflow: hidden` や `z-index` のスタイルを持っているものの、子要素がコンテナを「飛び出して」いるように見せたいようなものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。 +典型的なポータルのユースケースは、親要素が `overflow: hidden` や `z-index` のスタイルを持っていても、子要素にはコンテナを「飛び出して」いるように見えて欲しいようなものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。 > 補足 > @@ -54,7 +54,7 @@ render() { ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と同じように振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルだろうと完全に同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 -これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー** 上では祖先でなくともです。 +これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。 次のような HTML 構造があったとして、 @@ -67,7 +67,7 @@ render() { ``` -`#app-root` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントがキャッチされなかった場合に、それをキャッチできます。 +`#app-root` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントが捕捉されなかった場合に、それを捕捉できます。 ```js{28-31,42-49,53,61-63,70-71,74} // この 2 つのコンテナは DOM 上の兄弟要素とします @@ -85,7 +85,7 @@ class Modal extends React.Component { // つまり、子要素は一旦どこにも結びつかない DOM ノードへとマウントされるということです。 // もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ―― // たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど - // ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにしましょう。 + // ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにします。 modalRoot.appendChild(this.el); } @@ -149,4 +149,4 @@ ReactDOM.render(, appRoot); [**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -ポータルから浮上したイベントが親コンポーネントでキャッチできるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 +ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 From 1bcf31715d7a6b696904e9e02f0d7c5de11590b8 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 15:57:27 +0900 Subject: [PATCH 05/19] =?UTF-8?q?=E5=90=8C=E3=81=98=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=80=9C=E3=80=81=E5=90=8C=E3=81=98=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=20=E3=81=AE=E3=82=88=E3=81=86=E3=81=AA=E9=87=8D?= =?UTF-8?q?=E8=A4=87=E3=82=92=E9=81=BF=E3=81=91=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 7c163fad5..4db112ff8 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -27,7 +27,7 @@ render() { } ``` -しかし、時に子要素を DOM 上の異なる場所に挿入したほうが便利なことがあります。 +しかし、時に子要素を DOM 上の異なる位置に挿入したほうが便利なことがあります。 ```js{6} render() { @@ -40,7 +40,7 @@ render() { } ``` -典型的なポータルのユースケースは、親要素が `overflow: hidden` や `z-index` のスタイルを持っていても、子要素にはコンテナを「飛び出して」いるように見えて欲しいようなものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。 +ポータルの典型的なユースケースとは、親要素が `overflow: hidden` や `z-index` のスタイルを持っていても、子要素がコンテナを「飛び出して」見える必要があるものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。 > 補足 > @@ -52,11 +52,9 @@ render() { ## ポータルを介したイベントのバブリング -ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と同じように振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルだろうと完全に同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 +ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 -これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。 - -次のような HTML 構造があったとして、 +これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。次のような HTML 構造があったとして、 ```html From 6e33c357d5bab917f975218dda0ac2749876f334 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 16:02:48 +0900 Subject: [PATCH 06/19] =?UTF-8?q?fire=20=E3=81=AF=20=E7=99=BA=E8=A1=8C=20?= =?UTF-8?q?=E2=86=92=20=E7=99=BA=E7=81=AB=20=E3=81=A7=E8=A8=B3=E3=81=99?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 4db112ff8..508696459 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -54,7 +54,7 @@ render() { ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 -これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。次のような HTML 構造があったとして、 +これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。次のような HTML 構造があったとして、 ```html @@ -107,7 +107,7 @@ class Parent extends React.Component { } handleClick() { - // これは Child 内のボタンがクリックされた時に発行され、 Parent の state を更新します。 + // これは Child 内のボタンがクリックされた際に発火し、 Parent の state を更新します。 // たとえそのボタンが DOM 上では直系の子孫でなかったとしてもです。 this.setState(state => ({ clicks: state.clicks + 1 From c0fe0094f75fd3ebf2a0b33c7b3e5f4e432fa029 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sat, 2 Feb 2019 16:40:59 +0900 Subject: [PATCH 07/19] =?UTF-8?q?=E6=95=B0=E5=AD=97=E3=81=AE=E5=89=8D?= =?UTF-8?q?=E5=BE=8C=E3=81=AB=E3=82=B9=E3=83=9A=E3=83=BC=E3=82=B9=E3=81=8C?= =?UTF-8?q?=E6=8A=9C=E3=81=91=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 508696459..9aa61c48a 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -10,7 +10,7 @@ permalink: docs/portals.html ReactDOM.createPortal(child, container) ``` -第1引数 (`child`) は[React の子要素としてレンダー可能なもの](/docs/react-component.html#render)なら何でもよく、要素、文字列、フラグメントがそれに当たります。第2引数 (`container`) は DOM 要素を指定します。 +第 1 引数 (`child`) は [React の子要素としてレンダー可能なもの](/docs/react-component.html#render)なら何でもよく、要素、文字列、フラグメントがそれに当たります。第 2 引数 (`container`) は DOM 要素を指定します。 ## 使い方 From 739f56583f540fc4138525285eb7f5d5c3b6a746 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 2 Feb 2019 21:16:50 +0900 Subject: [PATCH 08/19] =?UTF-8?q?first-class=20=EF=BC=9D=20=E5=85=AC?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 9aa61c48a..334cc00b0 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) From 2d191d36023f2bc22c639439839316875d7c8a7c Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 2 Feb 2019 21:23:03 +0900 Subject: [PATCH 09/19] =?UTF-8?q?such=20as=20=E3=81=AE=E3=83=8B=E3=83=A5?= =?UTF-8?q?=E3=82=A2=E3=83=B3=E3=82=B9=E3=81=8C=E6=8A=9C=E3=81=91=E3=81=A6?= =?UTF-8?q?=E3=81=97=E3=81=BE=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B=E3=81=AE?= =?UTF-8?q?=E3=81=A7=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 334cc00b0..a2ff2e605 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -10,7 +10,7 @@ permalink: docs/portals.html ReactDOM.createPortal(child, container) ``` -第 1 引数 (`child`) は [React の子要素としてレンダー可能なもの](/docs/react-component.html#render)なら何でもよく、要素、文字列、フラグメントがそれに当たります。第 2 引数 (`container`) は DOM 要素を指定します。 +第 1 引数 (`child`) は [React の子要素としてレンダー可能なもの](/docs/react-component.html#render)、例えば、要素、文字列、フラグメントなどです。第 2 引数 (`container`) は DOM 要素を指定します。 ## 使い方 From e9eefc806f71615ba91124ac7546994c8761f781 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 2 Feb 2019 21:28:13 +0900 Subject: [PATCH 10/19] =?UTF-8?q?=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AE=E3=83=90=E3=83=96=E3=83=AA=E3=83=B3=E3=82=B0=E7=AC=AC?= =?UTF-8?q?1=E6=96=87=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 a2ff2e605..52fdb803c 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -52,7 +52,7 @@ render() { ## ポータルを介したイベントのバブリング -ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。 +ポータルは DOM ツリーのどこにでも存在できますが、他のあらゆる点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、*DOM ツリー*上の位置にかかわらず、ポータルは依然として *React のツリー*内にいるからです。 これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。次のような HTML 構造があったとして、 From ef14e46c6d04a4d7243b3eb264760f08d3f03483 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 2 Feb 2019 22:57:13 +0900 Subject: [PATCH 11/19] Update content/docs/portals.md Co-Authored-By: fsubal --- 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 52fdb803c..f92faec8f 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -147,4 +147,4 @@ ReactDOM.render(, appRoot); [**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 +ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、本来持っていない柔軟な抽象化がポータルによって可能になることを示しています。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 From e2653d12e4fe1e18f2831024989b73d0e813bbcd Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 2 Feb 2019 22:58:10 +0900 Subject: [PATCH 12/19] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E5=86=85?= =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=81=AE=E8=A8=B3=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 f92faec8f..0ef52594a 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -83,7 +83,7 @@ class Modal extends React.Component { // つまり、子要素は一旦どこにも結びつかない DOM ノードへとマウントされるということです。 // もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ―― // たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど - // ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにします。 + // ―― 場合は、 Modal に状態を持たせて Modal が DOM ツリーに挿入されているときだけ子要素をレンダーするようにします。 modalRoot.appendChild(this.el); } From f5254de180fd678953dff7ddd4c2e75533aa16a5 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sun, 3 Feb 2019 20:04:07 +0900 Subject: [PATCH 13/19] =?UTF-8?q?**=20=E2=86=92=20*?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 0ef52594a..17de1dbc1 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -54,7 +54,7 @@ render() { ポータルは DOM ツリーのどこにでも存在できますが、他のあらゆる点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、*DOM ツリー*上の位置にかかわらず、ポータルは依然として *React のツリー*内にいるからです。 -これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。次のような HTML 構造があったとして、 +これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは *React のツリー*内の祖先へと伝播します。たとえそれが *DOM ツリー*上では祖先でなくともです。次のような HTML 構造があったとして、 ```html From bb0d86eceb83b8686cdece8c9390be6650897a56 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sun, 3 Feb 2019 20:04:46 +0900 Subject: [PATCH 14/19] =?UTF-8?q?=E5=A4=96=E9=83=A8=E3=82=B5=E3=82=A4?= =?UTF-8?q?=E3=83=88=E3=81=AE=E5=90=8D=E5=89=8D=E3=81=AF=E4=B8=80=E6=97=A6?= =?UTF-8?q?=E3=81=9D=E3=81=AE=E3=81=BE=E3=81=BE=E3=81=AB=E3=81=97=E3=81=A6?= =?UTF-8?q?=E3=81=8A=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 17de1dbc1..18dd63c5c 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 *** Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal)に従い、誰もが利用できるという状態を確保してください。 [**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd) From b04a71bf0738dbfbee9ebf037a95f369be511d4e Mon Sep 17 00:00:00 2001 From: fsubal Date: Sun, 3 Feb 2019 20:08:21 +0900 Subject: [PATCH 15/19] =?UTF-8?q?Revert=20"=E5=A4=96=E9=83=A8=E3=82=B5?= =?UTF-8?q?=E3=82=A4=E3=83=88=E3=81=AE=E5=90=8D=E5=89=8D=E3=81=AF=E4=B8=80?= =?UTF-8?q?=E6=97=A6=E3=81=9D=E3=81=AE=E3=81=BE=E3=81=BE=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=A6=E3=81=8A=E3=81=8F"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit bb0d86eceb83b8686cdece8c9390be6650897a56. --- 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 18dd63c5c..17de1dbc1 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -46,7 +46,7 @@ render() { > > ポータルを利用する際は、[キーボードのフォーカスの管理](/docs/accessibility.html#programmatically-managing-focus)を行うことが重要になるので、忘れずに行ってください。 > -> モーダルダイアログについては [WAI-ARIA *** 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) From 6646b6e2d34fe591e8e3f0e55473d939388e1937 Mon Sep 17 00:00:00 2001 From: fsubal Date: Sun, 3 Feb 2019 20:10:05 +0900 Subject: [PATCH 16/19] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AE=E8=A1=8C=E6=95=B0=E3=81=8C=E5=A4=89=E3=82=8F=E3=82=8B?= =?UTF-8?q?=E3=81=A8=E3=80=81=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE=E3=83=8F?= =?UTF-8?q?=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88=E3=81=8C=E3=81=9A=E3=82=8C?= =?UTF-8?q?=E3=82=8B=E3=81=AE=E3=81=A7=E3=80=81=E5=85=83=E3=81=AE=E8=A1=8C?= =?UTF-8?q?=E6=95=B0=E3=81=AB=E5=8F=8E=E3=82=81=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 17de1dbc1..abf1ff7ed 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -79,11 +79,14 @@ class Modal extends React.Component { } componentDidMount() { - // ポータルの要素が DOM ツリーに挿入されるのは、 Modal の子要素がマウントされた後になります。 - // つまり、子要素は一旦どこにも結びつかない DOM ノードへとマウントされるということです。 + // ポータルの要素が DOM ツリーに挿入されるのは、 + // Modal の子要素がマウントされた後になります。 + // つまり、子要素は一旦どこにも結びつかない + // DOM ノードへとマウントされるということです。 // もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ―― // たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど - // ―― 場合は、 Modal に状態を持たせて Modal が DOM ツリーに挿入されているときだけ子要素をレンダーするようにします。 + // ―― 場合は、 Modal に状態を持たせて Modal が + // DOM ツリーに挿入されているときだけ子要素をレンダーするようにします。 modalRoot.appendChild(this.el); } @@ -107,7 +110,8 @@ class Parent extends React.Component { } handleClick() { - // これは Child 内のボタンがクリックされた際に発火し、 Parent の state を更新します。 + // これは Child 内のボタンがクリックされた際に発火し、 + // Parent の state を更新します。 // たとえそのボタンが DOM 上では直系の子孫でなかったとしてもです。 this.setState(state => ({ clicks: state.clicks + 1 From 7abeb9d93541d5e3ad8400baa4dd7d2665f7d620 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 4 Feb 2019 13:54:04 +0900 Subject: [PATCH 17/19] =?UTF-8?q?(portal)=20=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 abf1ff7ed..5eee50eac 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -4,7 +4,7 @@ title: ポータル permalink: docs/portals.html --- -ポータルは、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。 +ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。 ```js ReactDOM.createPortal(child, container) From 374da2d8fb62401329557e0ebc49aa9297d54024 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 4 Feb 2019 13:56:08 +0900 Subject: [PATCH 18/19] =?UTF-8?q?inherently=20=E3=81=AE=E3=81=8B=E3=81=8B?= =?UTF-8?q?=E3=82=8A=E6=96=B9=E3=81=8C=E5=A4=89=E3=82=8F=E3=81=A3=E3=81=A6?= =?UTF-8?q?=E3=81=97=E3=81=BE=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: fsubal --- 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 5eee50eac..92eaa0616 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、本来持っていない柔軟な抽象化がポータルによって可能になることを示しています。たとえば `` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`` の実装がポータルを使っているかに関係なくできます。 +ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、ポータルに本質的に依存することのない、より柔軟な抽象化が可能であるということを示しています。たとえば `` の実装がポータルを使っているかに関係なく、`` コンポーネントをレンダーしてそこから来るイベントを捕捉することができます。 From 78d51111f4423da6851acc680a6186fe82e0c4dc Mon Sep 17 00:00:00 2001 From: fsubal Date: Mon, 4 Feb 2019 13:58:24 +0900 Subject: [PATCH 19/19] =?UTF-8?q?=E8=A1=8C=E6=9C=AB=E3=81=AE=E3=82=B9?= =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B9=E3=81=AF=E5=89=8A=E3=81=A3=E3=81=A6?= =?UTF-8?q?=E3=81=8A=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 92eaa0616..018377903 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 ノードへとマウントされるということです。