docs(cn): update react-dom/createPortal translation and translate text in code (#1272)

Author: Yucohny

src/content/reference/react-dom/createPortal.md

@@ -4,7 +4,7 @@ title: createPortal
 
 <Intro>
 
-`createPortal` 允许你将一些子元素渲染到 DOM 的不同部分。
+`createPortal` 允许你将 JSX 作为 children 渲染至 DOM 的不同部分。
 
 
 ```js
@@ -32,33 +32,33 @@ import { createPortal } from 'react-dom';
 // ...
 
 <div>
-  <p>This child is placed in the parent div.</p>
+  <p>这个子节点被放置在父节点 div 中。</p>
   {createPortal(
-    <p>This child is placed in the document body.</p>,
+    <p>这个子节点被放置在 document body 中。</p>,
     document.body
   )}
 </div>
 ```
 
-[请查看以下更多示例](#usage)。
+[参见下方更多示例](#usage)。
 
-portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中的 JSX 将作为渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将从子节点冒泡到父节点树，以及遵循 React 树的规则。
+portal 只改变 DOM 节点的所处位置。在其他方面，渲染至 portal 的 JSX 的行为表现与作为 React 组件的子节点一致。该子节点可以访问由父节点树提供的 context 对象、事件将从子节点依循 React 树冒泡到父节点。
 
 #### 参数 {/*parameters*/}
 
-* `children`：React 可以渲染的任何内容，例如 JSX 片段（`<div />` 或 `<SomeComponent />` 等等）、[Fragment](/reference/react/Fragment)（`<>...</>`）、字符串或数字，以及这些内容构成的数组。
+* `children`：React 可以渲染的任何内容，如 JSX 片段（`<div />` 或 `<SomeComponent />` 等等）、[Fragment](/reference/react/Fragment)（`<>...</>`）、字符串或数字，以及这些内容构成的数组。
 
-* `domNode`：某个 DOM 节点，例如由 `document.getElementById()` 返回的节点。节点必须已经存在。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重新创建。
+* `domNode`：某个已经存在的 DOM 节点，例如由 `document.getElementById()` 返回的节点。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重建。
 
-#### 返回值 {/*returns*/}
+* **可选参数** `key`：用作 portal [key](/learn/rendering-lists/#keeping-list-items-in-order-with-key) 的独特字符串或数字。
 
-* **可选的** `key`: 用作 portal [key](/learn/rendering-lists/#keeping-list-items-in-order-with-key) 的独特字符串或数字。
+#### 返回值 {/*returns*/}
 
-`createPortal` 返回一个 React 节点，该节点可以包含在 JSX 中或从 React 组件中返回。如果 React 在渲染输出中遇见它，它将把提供的 `children` 放入提供的 `domNode` 中。
+`createPortal` 返回一个可以包含在 JSX 中或从 React 组件中返回的 React 节点。如果 React 在渲染输出中遇见它，它将把提供的 `children` 放入提供的 `domNode` 中。
 
 #### 警告 {/*caveats*/}
 
-* portal 中的事件传播遵循 React 树而不是 DOM 树。例如点击 `<div onClick>` 内部的 portal，将触发 `onClick` 处理程序。如果这导致问题，请在 portal 内部停止事件传播，或将 portal 本身移动到 React 树中的上层。
+* portal 中的事件传播遵循 React 树而不是 DOM 树。例如点击 `<div onClick>` 内部的 portal，将触发 `onClick` 处理程序。如果这会导致意外的问题，请在 portal 内部停止事件传播，或将 portal 移动到 React 树中的上层。
 
 ---
 
@@ -68,27 +68,27 @@ portal 只改变 DOM 节点的所处位置。在其他方面，传入 portal 中
 
 *portal* 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如组件可以在页面其余部分上方或外部显示模态对话框和提示框。
 
-要创建 portal，请使用 <CodeStep step={1}>JSX</CodeStep> 和 <CodeStep step={2}> 应该放置的 DOM 节点</CodeStep> 渲染 `createPortal` 的结果：
+调用 `createPortal` 并传入 <CodeStep step={1}>JSX</CodeStep> 与 <CodeStep step={2}> 应该放置的 DOM 节点</CodeStep> 作为参数，然后渲染返回值以创建 portal：
 
 ```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
 import { createPortal } from 'react-dom';
 
 function MyComponent() {
   return (
     <div style={{ border: '2px solid black' }}>
-      <p>This child is placed in the parent div.</p>
+      <p>这个子节点被放置在父节点 div 中。</p>
       {createPortal(
-        <p>This child is placed in the document body.</p>,
+        <p>这个子节点被放置在 document body 中。</p>,
         document.body
       )}
     </div>
   );
 }
 ```
 
-React 将 <CodeStep step={1}>传递的 JSX</CodeStep> 的 DOM 节点放入 <CodeStep step={2}>提供的 DOM 节点</CodeStep> 中。
+React 将 <CodeStep step={1}>传递的 JSX</CodeStep> 对应的 DOM 节点放入 <CodeStep step={2}>提供的 DOM 节点</CodeStep> 中。
 
-如果没有 portal，第二个 `<p>` 将放置在父级 `<div>` 中，但 portal 将其“传送”到 [`document.body`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/body) 中：
+如果没有 portal，第二个 `<p>` 将放置在父级 `<div>` 中，但 portal 会将其“传送”到 [`document.body`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/body) 中：
 
 <Sandpack>
 
@@ -98,9 +98,9 @@ import { createPortal } from 'react-dom';
 export default function MyComponent() {
   return (
     <div style={{ border: '2px solid black' }}>
-      <p>This child is placed in the parent div.</p>
+      <p>这个子节点被放置在父节点 div 中。</p>
       {createPortal(
-        <p>This child is placed in the document body.</p>,
+        <p>这个子节点被放置在 document body 中。</p>,
         document.body
       )}
     </div>
@@ -117,15 +117,15 @@ export default function MyComponent() {
   <div id="root">
     ...
       <div style="border: 2px solid black">
-        <p>This child is placed inside the parent div.</p>
+        <p>这个子节点被放置在父节点 div 中。</p>
       </div>
     ...
   </div>
-  <p>This child is placed in the document body.</p>
+  <p>这个子节点被放置在 document body 中。</p>
 </body>
 ```
 
-portal 只改变 DOM 节点的所处位置。另一方面，portal 中的 JSX 将作为实际渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将仍然从子节点冒泡到父节点树。
+portal 只改变 DOM 节点的所处位置。在其他方面，portal 中的 JSX 将作为实际渲染它的 React 组件的子节点。该子节点可以访问由父节点树提供的 context 对象、事件将仍然从子节点冒泡到父节点树。
 
 ---
 
@@ -164,7 +164,7 @@ export default function NoPortalExample() {
   return (
     <>
       <button onClick={() => setShowModal(true)}>
-        Show modal without a portal
+        不使用 portal 展示模态（modal）
       </button>
       {showModal && (
         <ModalContent onClose={() => setShowModal(false)} />
@@ -184,7 +184,7 @@ export default function PortalExample() {
   return (
     <>
       <button onClick={() => setShowModal(true)}>
-        Show modal using a portal
+        使用 portal 展示模态（motal）
       </button>
       {showModal && createPortal(
         <ModalContent onClose={() => setShowModal(false)} />,
@@ -199,8 +199,8 @@ export default function PortalExample() {
 export default function ModalContent({ onClose }) {
   return (
     <div className="modal">
-      <div>I'm a modal dialog</div>
-      <button onClick={onClose}>Close</button>
+      <div>这是一个模态对话框</div>
+      <button onClick={onClose}>关闭</button>
     </div>
   );
 }
@@ -238,29 +238,29 @@ export default function ModalContent({ onClose }) {
 
 <Pitfall>
 
-使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以以自然的方式进出 portal。
+使用 portal 时，确保应用程序的无障碍性非常重要。例如，你可能需要管理键盘焦点，以便用户可以自然进出 portal。
 
-创建模态对话框时，请遵循 [WAI-ARIA 模态实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它是无障碍的，并遵循这些指南。
+创建模态对话框时，请遵循 [WAI-ARIA 模态实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包，请确保它具有无障碍性，并遵循这些指南。
 
 </Pitfall>
 
 ---
 
 ### 将 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 的不同部分渲染，也可以共享状态。
 
 <Sandpack>
 
 ```html index.html
 <!DOCTYPE html>
 <html>
-  <head><title>My app</title></head>
+  <head><title>我的应用程序</title></head>
   <body>
-    <h1>Welcome to my hybrid app</h1>
+    <h1>我的网站一部分使用了 React，另外一部分没有使用</h1>
     <div class="parent">
       <div class="sidebar">
-        This is server non-React markup
+        这是一个非 React 服务器标记
         <div id="sidebar-content"></div>
       </div>
       <div id="root"></div>
@@ -301,11 +301,11 @@ export default function App() {
 }
 
 function MainContent() {
-  return <p>This part is rendered by React</p>;
+  return <p>这一部分是被 React 渲染的。</p>;
 }
 
 function SidebarContent() {
-  return <p>This part is also rendered by React!</p>;
+  return <p>这一部分也是被 React 渲染的！</p>;
 }
 ```
 
@@ -344,13 +344,13 @@ 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);
 ```
 
-在创建第三方小部件时，请存储由小部件返回的 DOM 节点，以便可以将内容渲染到其中：
+在创建第三方小部件时，存储由小部件返回的 DOM 节点，以便可以将内容渲染到其中：
 
 ```js {5-6}
 useEffect(() => {
@@ -369,7 +369,7 @@ useEffect(() => {
 return (
   <div style={{ width: 250, height: 250 }} ref={containerRef}>
     {popupContainer !== null && createPortal(
-      <p>Hello from React!</p>,
+      <p>来自 React 的你，你好！</p>,
       popupContainer
     )}
   </div>
@@ -420,7 +420,7 @@ export default function Map() {
   return (
     <div style={{ width: 250, height: 250 }} ref={containerRef}>
       {popupContainer !== null && createPortal(
-        <p>Hello from React!</p>,
+        <p>来自 React 的你，你好！</p>,
         popupContainer
       )}
     </div>