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` 创建 portal，并传入 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.
* `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`：某个 DOM 节点，例如由 `document.getElementById()` 返回的节点。节点必须已经存在。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重新创建。
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
+
*portal* 允许组件将它们的某些子元素渲染到 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
+
请注意，第二个段落在视觉上出现在带有边框的父级 `<div>`之外。如果你使用开发者工具检查 DOM 结构，会发现第二个 `<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.
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.
136
+
在此示例中，这两个容器具有破坏模态对话框的样式，但是渲染到 portal 中的容器不受影响，因为在 DOM 中，模态对话框不包含在父 JSX 元素内部。
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.
### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
345
+
### 将 React 组件渲染到非 React DOM 节点{/*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
+
你还可以使用 portal 来管理在 React 之外管理的 DOM 节点的内容。假设你正在集成非 React 地图小部件，并且想要在弹出窗口中渲染 React 内容。那么请声明一个 `popupContainer` state 变量来存储要渲染到的目标 DOM 节点：
0 commit comments