@@ -4,7 +4,7 @@ title: ポータル
4
4
permalink : docs/portals.html
5
5
---
6
6
7
- ポータルは、親コンポーネントの DOM 階層の外にある DOM ノードに対して、子コンポーネントを描画するための第一級の方法を提供します。
7
+ ポータルは、親コンポーネントの DOM 階層外にある DOM ノードに対して、子コンポーネントを描画するための第一級の方法を提供します。
8
8
9
9
``` js
10
10
ReactDOM .createPortal (child, container)
@@ -14,7 +14,7 @@ ReactDOM.createPortal(child, container)
14
14
15
15
## 使い方
16
16
17
- 通常、コンポーネントの ` render ` メソッドから要素を返すと、最も近い親ノードの子要素として DOM にマウントされます。
17
+ 通常、コンポーネントの ` render ` メソッドから要素を返すと、最も近い親ノードの子として DOM にマウントされます。
18
18
19
19
``` js{4,6}
20
20
render() {
@@ -40,7 +40,7 @@ render() {
40
40
}
41
41
```
42
42
43
- 典型的なポータルのユースケースは、親要素が ` overflow: hidden ` や ` z-index ` のスタイルを持っているものの、子要素がコンテナを 「飛び出して」いるように見せたいようなものです 。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。
43
+ 典型的なポータルのユースケースは、親要素が ` overflow: hidden ` や ` z-index ` のスタイルを持っていても、子要素にはコンテナを 「飛び出して」いるように見えて欲しいようなものです 。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。
44
44
45
45
> 補足
46
46
>
@@ -54,7 +54,7 @@ render() {
54
54
55
55
ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と同じように振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルだろうと完全に同じように動きます。というのも、 ** DOM ツリー** 上の位置にかかわらず、ポータルは依然として ** React のツリー** 内にいるからです。
56
56
57
- これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは ** React のツリー** 内の祖先へと伝播します。たとえそれが ** DOM ツリー** 上では祖先でなくともです。
57
+ これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは ** React のツリー** 内の祖先へと伝播します。たとえそれが ** DOM ツリー** 上では祖先でなくともです。
58
58
59
59
次のような HTML 構造があったとして、
60
60
@@ -67,7 +67,7 @@ render() {
67
67
</html >
68
68
```
69
69
70
- ` #app-root ` 内にある ` Parent ` コンポーネントは、 ` #modal-root ` 内のコンポーネントから伝播したイベントがキャッチされなかった場合に、それをキャッチできます 。
70
+ ` #app-root ` 内にある ` Parent ` コンポーネントは、 ` #modal-root ` 内のコンポーネントから伝播したイベントが捕捉されなかった場合に、それを捕捉できます 。
71
71
72
72
``` js{28-31,42-49,53,61-63,70-71,74}
73
73
// この 2 つのコンテナは DOM 上の兄弟要素とします
@@ -85,7 +85,7 @@ class Modal extends React.Component {
85
85
// つまり、子要素は一旦どこにも結びつかない DOM ノードへとマウントされるということです。
86
86
// もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ――
87
87
// たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど
88
- // ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにしましょう 。
88
+ // ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにします 。
89
89
modalRoot.appendChild(this.el);
90
90
}
91
91
@@ -149,4 +149,4 @@ ReactDOM.render(<Parent />, appRoot);
149
149
150
150
[ ** Try it on CodePen** ] ( https://codepen.io/gaearon/pen/jGBWpE )
151
151
152
- ポータルから浮上したイベントが親コンポーネントでキャッチできるということは 、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば ` <Modal /> ` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、` <Modal /> ` の実装がポータルを使っているかに関係なくできます。
152
+ ポータルから伝播したイベントが親コンポーネントで捕捉できるということは 、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば ` <Modal /> ` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、` <Modal /> ` の実装がポータルを使っているかに関係なくできます。
0 commit comments