From 0b94a0fee102e0f65216531ae164863057f2a244 Mon Sep 17 00:00:00 2001 From: Yucohny Date: Mon, 24 Apr 2023 23:07:36 +0800 Subject: [PATCH 01/12] docs(cn): reference/react-dom/createPortal --- .../reference/react-dom/createPortal.md | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index eef9154092..bf572a9f3a 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -4,7 +4,7 @@ title: createPortal -`createPortal` lets you render some children into a different part of the DOM. +`createPortal` 允许你将一些子元素渲染到 DOM 的不同部分。 ```js @@ -20,11 +20,11 @@ title: createPortal --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `createPortal(children, domNode)` {/*createportal*/} -To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered: +调用 `createPortal` 创建 portal，并传入 JSX 与应该渲染所处的 DOM 节点： ```js import { createPortal } from 'react-dom'; @@ -40,33 +40,33 @@ import { createPortal } from 'react-dom'; ``` -[See more examples below.](#usage) +[请查看以下更多示例](#usage)。 -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. +portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中的 JSX 将作为渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将从子节点冒泡到父节点树，以及遵循 React 树的规则。 -#### Parameters {/*parameters*/} +#### 参数 {/*parameters*/} -* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `
` or ``), a [Fragment](/reference/react/Fragment) (`<>...`), a string or a number, or an array of these. +* `children`：可以使用 React 渲染的任何内容，例如 JSX 片段（例如 `
` 或 ``）、[Fragment](/reference/react/Fragment)（`<>...`）、字符串或数字，或者是这些内容的数组。 -* `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. +* `domNode`：某个 DOM 节点，例如由 `document.getElementById()` 返回的节点。节点必须已经存在。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重新创建。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -`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`. +`createPortal` 返回一个 React 节点，该节点可以包含在 JSX 中或从 React 组件中返回。如果 React 在渲染输出中遇见它，它将把提供的 `children` 放入提供的 `domNode` 中。 -#### Caveats {/*caveats*/} +#### 警告 {/*caveats*/} -* 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 `
`, 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. +* portal 中的事件传播遵循 React 树而不是 DOM 树。例如，如果你在 portal 中触发点击事件，并且 portal 被包装在 `
` 中，则将触发 `onClick` 处理程序。如果这会导致问题，请在 portal 内部停止事件传播，或将 portal 本身移动到 React 树中的上层。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/} +### 渲染到 DOM 的不同部分 {/*rendering-to-a-different-part-of-the-dom*/} -*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. +*Portals* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如，组件可以显示出现在页面其余部分之上和之外的模态对话框或工具提示。 -To create a portal, render the result of `createPortal` with some JSX and the DOM node where it should go: +要创建 portal，请使用 JSX 和 应该放置的 DOM 节点 渲染 `createPortal` 的结果： ```js [[1, 8, "

This child is placed in the document body.

"], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; @@ -84,9 +84,9 @@ function MyComponent() { } ``` -React will put the DOM nodes for the JSX you passed inside of the DOM node you provided. +React 将 传递的 JSX 的 DOM 节点放入 提供的 DOM 节点 中。 -Without a portal, the second `

` would be placed inside the parent `

`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body) +如果没有 portal，第二个 `

` 将放置在父级 `

` 中，但 portal 将其“传送”到 [`document.body`](https://developer.mozilla.org/en-US/docs/Web/API/Document/body) 中： @@ -108,7 +108,7 @@ export default function MyComponent() { -Notice how the second paragraph visually appears outside the parent `
` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `

` got placed directly into the ``: +请注意，第二个段落在视觉上出现在带有边框的父级 `

` 之外。如果你使用开发者工具检查 DOM 结构，会发现第二个 `

` 直接放置在 `` 中： ```html {4-6,9} @@ -123,15 +123,15 @@ Notice how the second paragraph visually appears outside the parent `

` with ``` -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. +portal 只改变 DOM 节点的所处位置。在其他方面，入 portal 中的 JSX 将作为渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将仍然从子节点冒泡到父节点树。 --- -### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/} +### 使用 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. +你可以使用 portal 创建一个浮动在页面其余部分之上的模态对话框，即使呼出对话框的组件位于带有 `overflow: hidden` 或其他干扰对话框的样式的容器中。 -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. +在此示例中，这两个容器具有破坏模态对话框的样式，但是渲染到 portal 中的容器不受影响，因为在 DOM 中，模态对话框不包含在父 JSX 元素内部。 @@ -236,17 +236,17 @@ export default function ModalContent({ onClose }) { -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. +使用 portal 时，确保应用程序是可访问的非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。 -Follow the [WAI-ARIA Modal 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. +创建模态对话框时，请遵循 [WAI-ARIA 模态作者实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是可访问的，并遵循这些指南。 --- -### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/} +### 将 React 组件渲染到非 React 服务器标记中 {/*rendering-react-components-into-non-react-server-markup*/} -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. +如果你的网站只有一部分使用 React 构建，而其他部分是静态页面或由服务器呈现的页面，则 portal 可能非常有用。例如，如果你的页面使用 Rails 等服务器框架构建，则可以在静态区域（例如侧边栏）中创建交互区域。与拥有 [多个独立的 React 根](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 相比，portal 将应用程序视为具有共享状态的单个 React 树，即使其部分呈现到 DOM 的不同部分也是如此。 @@ -340,15 +340,15 @@ p { --- -### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/} +### 将 React 组件渲染到非 React DOM 节点{/*rendering-react-components-into-non-react-dom-nodes*/} -You can also use a portal to manage the content of a DOM node that's managed outside of React. 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: +你还可以使用 portal 来管理在 React 之外管理的 DOM 节点的内容。例如，假设正在集成非 React 地图小部件，并且想要在弹出窗口中渲染 React 内容。为此，请声明一个 `popupContainer` state 变量来存储要渲染到的 DOM 节点： ```js const [popupContainer, setPopupContainer] = useState(null); ``` -When you create the third-party widget, store the DOM node returned by the widget so you can render into it: +在创建第三方小部件时，请存储由小部件返回的 DOM 节点，以便可以将内容渲染到其中： ```js {5-6} useEffect(() => { @@ -361,7 +361,7 @@ useEffect(() => { }, []); ``` -This lets you use `createPortal` to render React content into `popupContainer` once it becomes available: +这样，一旦 `popupContainer` 可用，就可以使用 `createPortal` 将 React 内容渲染到其中： ```js {3-6} return ( @@ -374,7 +374,7 @@ return ( ); ``` -Here is a complete example you can play with: +以下是一个完整的示例，你可以尝试一下： From d20b847a45a7d7c3523ed31275df63db1f5fdf26 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Wed, 26 Apr 2023 11:14:02 +0800 Subject: [PATCH 02/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xavi Lee --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index bf572a9f3a..ace818255c 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -64,7 +64,7 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中 ### 渲染到 DOM 的不同部分 {/*rendering-to-a-different-part-of-the-dom*/} -*Portals* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如，组件可以显示出现在页面其余部分之上和之外的模态对话框或工具提示。 +*portal* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如，组件可以显示出现在页面其余部分之上和之外的模态对话框或工具提示。 要创建 portal，请使用 JSX 和 应该放置的 DOM 节点 渲染 `createPortal` 的结果： From 36504e57eb9308e9107d02edf89bda1baf6754fe Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:51:30 +0800 Subject: [PATCH 03/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index ace818255c..389765e31d 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -236,7 +236,7 @@ export default function ModalContent({ onClose }) { -使用 portal 时，确保应用程序是可访问的非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。 +使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。 创建模态对话框时，请遵循 [WAI-ARIA 模态作者实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是可访问的，并遵循这些指南。 From d3124c0e8507961c79cad9d2ef9e58401e782fa2 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:51:37 +0800 Subject: [PATCH 04/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 389765e31d..b8a3777ce0 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -238,7 +238,7 @@ export default function ModalContent({ onClose }) { 使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。 -创建模态对话框时，请遵循 [WAI-ARIA 模态作者实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是可访问的，并遵循这些指南。 +创建模态对话框时，请遵循 [WAI-ARIA 模态作者实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是无障碍的，并遵循这些指南。 From 26c0b8c53d1aefb154d884e229b40545f3059cd8 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:51:52 +0800 Subject: [PATCH 05/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index b8a3777ce0..160a728f35 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -342,7 +342,7 @@ p { ### 将 React 组件渲染到非 React DOM 节点{/*rendering-react-components-into-non-react-dom-nodes*/} -你还可以使用 portal 来管理在 React 之外管理的 DOM 节点的内容。例如，假设正在集成非 React 地图小部件，并且想要在弹出窗口中渲染 React 内容。为此，请声明一个 `popupContainer` state 变量来存储要渲染到的 DOM 节点： +你还可以使用 portal 来管理在 React 之外管理的 DOM 节点的内容。假设你正在集成非 React 地图小部件，并且想要在弹出窗口中渲染 React 内容。那么请声明一个 `popupContainer` state 变量来存储要渲染到的目标 DOM 节点： ```js const [popupContainer, setPopupContainer] = useState(null); From 0e8445997ae6e61d08f1b15d8201dd267b248477 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:52:04 +0800 Subject: [PATCH 06/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 160a728f35..c2141a7d1b 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -246,7 +246,7 @@ export default function ModalContent({ onClose }) { ### 将 React 组件渲染到非 React 服务器标记中 {/*rendering-react-components-into-non-react-server-markup*/} -如果你的网站只有一部分使用 React 构建，而其他部分是静态页面或由服务器呈现的页面，则 portal 可能非常有用。例如，如果你的页面使用 Rails 等服务器框架构建，则可以在静态区域（例如侧边栏）中创建交互区域。与拥有 [多个独立的 React 根](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 相比，portal 将应用程序视为具有共享状态的单个 React 树，即使其部分呈现到 DOM 的不同部分也是如此。 +如果你的网站只有一部分使用 React 构建，而其他部分是静态页面或由服务器呈现的页面，则 portal 可能非常有用。如果你的页面使用 Rails 等服务端框架构建，则可以在静态区域（例如侧边栏）中创建交互区域。与拥有 [多个独立的 React 根](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 相比，portal 将应用程序视为具有共享状态的单个 React 树，即使其部分呈现到 DOM 的不同部分也是如此。 From d8826f496e4d1665d014d39b6f74ade7b38e32f0 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:52:19 +0800 Subject: [PATCH 07/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index c2141a7d1b..693eb2bb73 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -56,7 +56,7 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中 #### 警告 {/*caveats*/} -* portal 中的事件传播遵循 React 树而不是 DOM 树。例如，如果你在 portal 中触发点击事件，并且 portal 被包装在 `
` 中，则将触发 `onClick` 处理程序。如果这会导致问题，请在 portal 内部停止事件传播，或将 portal 本身移动到 React 树中的上层。 +* portal 中的事件传播遵循 React 树而不是 DOM 树。例如点击 `
` 内部的 portal，将触发 `onClick` 处理程序。如果这导致问题，请在 portal 内部停止事件传播，或将 portal 本身移动到 React 树中的上层。 --- From 82d183e97e1199dfd11981d9bbc99bcc95708e35 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:52:46 +0800 Subject: [PATCH 08/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 693eb2bb73..65c1a246ba 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -46,7 +46,7 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中 #### 参数 {/*parameters*/} -* `children`：可以使用 React 渲染的任何内容，例如 JSX 片段（例如 `
` 或 ``）、[Fragment](/reference/react/Fragment)（`<>...`）、字符串或数字，或者是这些内容的数组。 +* `children`：React 可以渲染的任何内容，例如 JSX 片段（`
` 或 `` 等等）、[Fragment](/reference/react/Fragment)（`<>...`）、字符串或数字，以及这些内容构成的数组。 * `domNode`：某个 DOM 节点，例如由 `document.getElementById()` 返回的节点。节点必须已经存在。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重新创建。 From 0f38a255460c250684c89288430bcce48b506832 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:52:53 +0800 Subject: [PATCH 09/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 65c1a246ba..8b668df8d2 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -24,7 +24,7 @@ title: createPortal ### `createPortal(children, domNode)` {/*createportal*/} -调用 `createPortal` 创建 portal，并传入 JSX 与应该渲染所处的 DOM 节点： +调用 `createPortal` 创建 portal，并传入 JSX 与实际渲染的目标 DOM 节点： ```js import { createPortal } from 'react-dom'; From f203a27ea221d467cd83b73848a9fbcda1a8e279 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:53:03 +0800 Subject: [PATCH 10/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 8b668df8d2..40c475524d 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -64,7 +64,7 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中 ### 渲染到 DOM 的不同部分 {/*rendering-to-a-different-part-of-the-dom*/} -*portal* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如，组件可以显示出现在页面其余部分之上和之外的模态对话框或工具提示。 +*portal* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如组件可以在页面其余部分上方或外部显示模态对话框和提示框。 要创建 portal，请使用 JSX 和 应该放置的 DOM 节点 渲染 `createPortal` 的结果： From ffd15c74ded28be90d1fe3d83d1b9ac8fff5aad5 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sat, 6 May 2023 12:53:33 +0800 Subject: [PATCH 11/12] Update src/content/reference/react-dom/createPortal.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 40c475524d..a6f8045e6b 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -66,7 +66,7 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中 *portal* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如组件可以在页面其余部分上方或外部显示模态对话框和提示框。 -要创建 portal，请使用 JSX 和 应该放置的 DOM 节点 渲染 `createPortal` 的结果： +要创建 portal，请使用 JSX 和 应该放置的 DOM 节点 渲染 `createPortal` 的结果： ```js [[1, 8, "

This child is placed in the document body.

"], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; From 36db1e01a4c768265daaabada0ca3849f03c2e1b Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Fri, 19 May 2023 10:53:15 +0800 Subject: [PATCH 12/12] Apply suggestions from code review Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/createPortal.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 181607c4ac..4719d19147 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -125,13 +125,13 @@ export default function MyComponent() { ``` -portal 只改变 DOM 节点的所处位置。在其他方面，入 portal 中的 JSX 将作为渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将仍然从子节点冒泡到父节点树。 +portal 只改变 DOM 节点的所处位置。另一方面，portal 中的 JSX 将作为实际渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将仍然从子节点冒泡到父节点树。 --- ### 使用 portal 渲染模态对话框 {/*rendering-a-modal-dialog-with-a-portal*/} -你可以使用 portal 创建一个浮动在页面其余部分之上的模态对话框，即使呼出对话框的组件位于带有 `overflow: hidden` 或其他干扰对话框的样式的容器中。 +你可以使用 portal 创建一个浮动在页面其余部分之上的模态对话框，即使呼出对话框的组件位于带有 `overflow: hidden` 或其他干扰对话框样式的容器中。 在此示例中，这两个容器具有破坏模态对话框的样式，但是渲染到 portal 中的容器不受影响，因为在 DOM 中，模态对话框不包含在父 JSX 元素内部。 @@ -240,7 +240,7 @@ export default function ModalContent({ onClose }) { 使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。 -创建模态对话框时，请遵循 [WAI-ARIA 模态作者实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是无障碍的，并遵循这些指南。 +创建模态对话框时，请遵循 [WAI-ARIA 模态实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是无障碍的，并遵循这些指南。 @@ -248,7 +248,7 @@ export default function ModalContent({ onClose }) { ### 将 React 组件渲染到非 React 服务器标记中 {/*rendering-react-components-into-non-react-server-markup*/} -如果你的网站只有一部分使用 React 构建，而其他部分是静态页面或由服务器呈现的页面，则 portal 可能非常有用。如果你的页面使用 Rails 等服务端框架构建，则可以在静态区域（例如侧边栏）中创建交互区域。与拥有 [多个独立的 React 根](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 相比，portal 将应用程序视为具有共享状态的单个 React 树，即使其部分呈现到 DOM 的不同部分也是如此。 +如果你在静态或服务端渲染的网站中只有某一部分使用 React，则 portal 可能非常有用。如果你的页面使用 Rails 等服务端框架构建，则可以在静态区域（例如侧边栏）中创建交互区域。与拥有 [多个独立的 React 根](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 相比，portal 将应用程序视为具有共享状态的单个 React 树，即使其部分呈现到 DOM 的不同部分也是如此。