You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/portals.md
+32-32Lines changed: 32 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
2
id: portals
3
-
title: Portals
3
+
title: ポータル
4
4
permalink: docs/portals.html
5
5
---
6
6
7
-
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
7
+
ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。
8
8
9
9
```js
10
10
ReactDOM.createPortal(child, container)
11
11
```
12
12
13
-
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.
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:
17
+
通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子として DOM にマウントされます。
18
18
19
19
```js{4,6}
20
20
render() {
21
-
// React mounts a new div and renders the children into it
21
+
// React は新しい div 要素をマウントし、子をその中に描画します
22
22
return (
23
23
<div>
24
24
{this.props.children}
@@ -27,34 +27,34 @@ render() {
27
27
}
28
28
```
29
29
30
-
However, sometimes it's useful to insert a child into a different location in the DOM:
30
+
しかし、時に子要素を DOM 上の異なる位置に挿入したほうが便利なことがあります。
31
31
32
32
```js{6}
33
33
render() {
34
-
// React does *not* create a new div. It renders the children into `domNode`.
35
-
// `domNode` is any valid DOM node, regardless of its location in the DOM.
34
+
// React は新しい div をつくり*ません*。子要素は `domNode` に対して描画されます。
35
+
// `domNode` は DOM ノードであれば何でも良く、 DOM 構造内のどこにあるかは問いません。
36
36
return ReactDOM.createPortal(
37
37
this.props.children,
38
38
domNode
39
39
);
40
40
}
41
41
```
42
42
43
-
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.
> 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).
[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
52
52
53
-
## Event Bubbling Through Portals
53
+
## ポータルを介したイベントのバブリング
54
54
55
-
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*.
55
+
ポータルは DOM ツリーのどこにでも存在できますが、他のあらゆる点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、*DOM ツリー*上の位置にかかわらず、ポータルは依然として *React のツリー*内にいるからです。
56
56
57
-
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:
57
+
これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは *React のツリー*内の祖先へと伝播します。たとえそれが *DOM ツリー*上では祖先でなくともです。次のような HTML 構造があったとして、
58
58
59
59
```html
60
60
<html>
@@ -65,10 +65,10 @@ This includes event bubbling. An event fired from inside a portal will propagate
65
65
</html>
66
66
```
67
67
68
-
A `Parent` component in `#app-root`would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
153
153
154
-
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 `<Modal />`component, the parent can capture its events regardless of whether it's implemented using portals.
0 commit comments