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
+21-19
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
+
ポータルは、親コンポーネントの 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.
13
+
第1引数 (`child`) は[React の子要素としてレンダー可能なもの](/docs/react-component.html#render)なら何でもよく、要素、文字列、フラグメントがそれに当たります。第2引数 (`container`) は DOM 要素を指定します。
14
14
15
-
## Usage
15
+
## 使い方
16
16
17
-
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,36 @@ 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*.
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:
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
153
155
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