Skip to content

Commit e2aa1c5

Browse files
committed
気になる細かい表現を修正
1 parent f530cd6 commit e2aa1c5

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

content/docs/portals.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: ポータル
44
permalink: docs/portals.html
55
---
66

7-
ポータルは、親コンポーネントの DOM 階層の外にある DOM ノードに対して、子コンポーネントを描画するための第一級の方法を提供します。
7+
ポータルは、親コンポーネントの DOM 階層外にある DOM ノードに対して、子コンポーネントを描画するための第一級の方法を提供します。
88

99
```js
1010
ReactDOM.createPortal(child, container)
@@ -14,7 +14,7 @@ ReactDOM.createPortal(child, container)
1414

1515
## 使い方
1616

17-
通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子要素として DOM にマウントされます。
17+
通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子として DOM にマウントされます。
1818

1919
```js{4,6}
2020
render() {
@@ -40,7 +40,7 @@ render() {
4040
}
4141
```
4242

43-
典型的なポータルのユースケースは、親要素が `overflow: hidden``z-index` のスタイルを持っているものの、子要素がコンテナを「飛び出して」いるように見せたいようなものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。
43+
典型的なポータルのユースケースは、親要素が `overflow: hidden``z-index` のスタイルを持っていても、子要素にはコンテナを「飛び出して」いるように見えて欲しいようなものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。
4444

4545
> 補足
4646
>
@@ -54,7 +54,7 @@ render() {
5454

5555
ポータルは DOM ツリーのどこにでもありうるとはいえ、他の点では通常の React の子要素と同じように振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルだろうと完全に同じように動きます。というのも、 **DOM ツリー**上の位置にかかわらず、ポータルは依然として **React のツリー**内にいるからです。
5656

57-
これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー** 上では祖先でなくともです。
57+
これにはイベントのバブリングも含まれます。ポータルの内部から発行されたイベントは **React のツリー**内の祖先へと伝播します。たとえそれが **DOM ツリー**上では祖先でなくともです。
5858

5959
次のような HTML 構造があったとして、
6060

@@ -67,7 +67,7 @@ render() {
6767
</html>
6868
```
6969

70-
`#app-root` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントがキャッチされなかった場合に、それをキャッチできます
70+
`#app-root` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントが捕捉されなかった場合に、それを捕捉できます
7171

7272
```js{28-31,42-49,53,61-63,70-71,74}
7373
// この 2 つのコンテナは DOM 上の兄弟要素とします
@@ -85,7 +85,7 @@ class Modal extends React.Component {
8585
// つまり、子要素は一旦どこにも結びつかない DOM ノードへとマウントされるということです。
8686
// もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ――
8787
// たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど
88-
// ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにしましょう
88+
// ―― 場合は、 Modal に状態を持たせて子要素が DOM ツリーに入ったときだけ描画されるようにします
8989
modalRoot.appendChild(this.el);
9090
}
9191
@@ -149,4 +149,4 @@ ReactDOM.render(<Parent />, appRoot);
149149

150150
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
151151

152-
ポータルから浮上したイベントが親コンポーネントでキャッチできるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `<Modal />` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`<Modal />` の実装がポータルを使っているかに関係なくできます。
152+
ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、より柔軟な抽象を、本質的にポータルに依存しない形で開発できるということです。たとえば `<Modal />` コンポーネントをレンダーして、親コンポーネントがそこから来るイベントを捕捉するのは、`<Modal />` の実装がポータルを使っているかに関係なくできます。

0 commit comments

Comments
 (0)