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
To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered:
27
+
ポータルを作成するには、`createPortal` を呼び出し、JSX とそれをレンダーする先の DOM ノードを渡します。
28
28
29
29
```js
30
30
import { createPortal } from'react-dom';
@@ -40,35 +40,35 @@ import { createPortal } from 'react-dom';
40
40
</div>
41
41
```
42
42
43
-
[See more examples below.](#usage)
43
+
[さらに例を読む](#usage)
44
44
45
-
A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.
45
+
ポータルは DOM ノードの物理的な配置だけを変更します。それ以外のすべての点で、ポータルにレンダーする JSX は、レンダー元の React コンポーネントの子ノードとして機能します。例えば、子は親ツリーが提供するコンテクストにアクセスでき、イベントは React ツリーに従って子から親へとバブルアップします。
46
46
47
-
#### Parameters {/*parameters*/}
47
+
#### 引数 {/*parameters*/}
48
48
49
-
* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `<div />`or`<SomeComponent />`), a [Fragment](/reference/react/Fragment) (`<>...</>`), a string or a number, or an array of these.
* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
51
+
* `domNode`: `document.getElementById()` によって返されるような DOM ノード。ノードはすでに存在している必要があります。更新中に異なる DOM ノードを渡すと、ポータルの内容が再作成されます。
52
52
53
-
* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key)
`createPortal`returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children`inside the provided `domNode`.
* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `<div onClick>`, that`onClick`handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree.
### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/}
67
+
### DOM 内の別部分へのレンダー {/*rendering-to-a-different-part-of-the-dom*/}
68
68
69
-
*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
69
+
*ポータル*により、コンポーネントが子の一部を DOM 内の別の場所にレンダーできるようになります。これにより、コンポーネントの出力の一部を、自身の含まれているコンテナの外に「脱出」させることが可能です。例えばコンポーネントから、ページの他の要素の上部や外部に表示されるモーダルダイアログやツールチップを表示することができます。
70
70
71
-
To create a portal, render the result of `createPortal` with <CodeStep step={1}>some JSX</CodeStep> and the <CodeStep step={2}>DOM node where it should go</CodeStep>:
```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
74
74
import { createPortal } from'react-dom';
@@ -86,9 +86,9 @@ function MyComponent() {
86
86
}
87
87
```
88
88
89
-
React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>.
89
+
React は、<CodeStep step={1}>渡した JSX</CodeStep> に対応する DOM ノードを <CodeStep step={2}>渡した DOM ノード</CodeStep> の内部に配置します。
90
90
91
-
Without a portal, the second `<p>`would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
@@ -110,7 +110,7 @@ export default function MyComponent() {
110
110
111
111
</Sandpack>
112
112
113
-
Notice how the second paragraph visually appears outside the parent `<div>`with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>`got placed directly into the `<body>`:
113
+
2 つ目の段落が親の `<div>`の境界線の外側に表示されていることに注意してください。開発者ツールで DOM 構造を調べると、2 つ目の `<p>`が直接 `<body>` に配置されていることがわかります。
114
114
115
115
```html {4-6,9}
116
116
<body>
@@ -125,15 +125,15 @@ Notice how the second paragraph visually appears outside the parent `<div>` with
125
125
</body>
126
126
```
127
127
128
-
A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
128
+
ポータルは DOM ノードの物理的な配置だけを変更します。それ以外のすべての点で、ポータルにレンダーする JSX は、レンダー元の React コンポーネントの子ノードとして機能します。例えば、子は親ツリーが提供するコンテクストにアクセスでき、イベントは React ツリーに従って子から親へとバブルアップします。
129
129
130
130
---
131
131
132
-
### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/}
You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden`or other styles that interfere with the dialog.
In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the parent JSX elements.
It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way.
Follow the [WAI-ARIAModal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
251
+
React で構築されていない静的ページあるいはサーバレンダーされたページの一部に React ルートがある場合にも、ポータルは有用です。例えば、ページが Rails のようなサーバフレームワークで構築されている場合、サイドバーなどの静的な部位の内部に操作可能なエリアを作成することができます。[別々の React ルート](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react)を複数用いる場合と異なり、ポータルを使うとアプリを単一の React ツリーとして扱うことができ、部位ごとに DOM 内の異なる場所にレンダーさせつつも state を共有可能です。
252
252
253
253
<Sandpack>
254
254
@@ -342,15 +342,15 @@ p {
342
342
343
343
---
344
344
345
-
### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
345
+
### 非 React DOM ノードに React コンポーネントをレンダー {/*rendering-react-components-into-non-react-dom-nodes*/}
346
346
347
-
You can also use a portal to manage the content of a DOM node that's managed outside ofReact. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup. To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
347
+
React 外で管理されている DOM ノードの内容を管理するためにポータルを使用することもできます。例えば、非 React のマップウィジェットと統合していて、ポップアップ内に React のコンテンツをレンダーしたいとします。これを行うには、レンダーする DOM ノードを格納するための `popupContainer` state 変数を宣言します。
0 commit comments