From 4017ac673bb06fb6dc52f7c9b27cd5d4f629e79c Mon Sep 17 00:00:00 2001
From: Bocong Zhao <zhaobocong@hotmail.com>
Date: Wed, 27 Feb 2019 21:05:15 -0500
Subject: [PATCH 1/8] Translated Portals

---
 content/docs/portals.md | 38 +++++++++++++++++---------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 6501213962..dbcd61f70a 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -3,18 +3,16 @@ id: portals
 title: Portals
 permalink: docs/portals.html
 ---
-
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
-
+Portals 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
 ```js
 ReactDOM.createPortal(child, container)
 ```
 
-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.
+第一个参数(`child`)是任何[可渲染的 React 子元素](/docs/react-component.html#render),例如一个元素,字符串或 fragment。第二个参数(`container`)是一个 DOM 元素。
 
-## Usage {#usage}
+## 用法 {#usage}
 
-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:
+通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被装载到 DOM 节点中离其最近的父节点:
 
 ```js{4,6}
 render() {
@@ -26,8 +24,7 @@ render() {
   );
 }
 ```
-
-However, sometimes it's useful to insert a child into a different location in the DOM:
+然而,有时候将子元素插入到 DOM 节点中的不同位置也是有好处的:
 
 ```js{6}
 render() {
@@ -39,22 +36,21 @@ render() {
   );
 }
 ```
+对于 portals 的一个典型用例是当父组件有 `overflow: hidden` 或 `z-index` 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框:
 
-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.
-
-> Note:
->
-> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
+> 注意:
+> 
+> 当在使用 portals 时, 记住[管理键盘焦点](/docs/accessibility.html#programmatically-managing-focus)就变得尤为重要。
 >
-> 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).
+> 对于模态框,通过遵循[WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
+[**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## Event Bubbling Through Portals {#event-bubbling-through-portals}
+## 通过 Portals 进行事件冒泡 {#event-bubbling-through-portals}
 
-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*.
+尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且不管 *DOM 树* 中的位置,那么无论其子节点是否是 portal,功能特性比如 context 的工作原理都是不变的。
 
-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:
+这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树* 的祖先,即便这些元素并不是 *DOM tree* 中的祖先。假设如下 HTML 结构:
 
 ```html
 <html>
@@ -65,7 +61,7 @@ This includes event bubbling. An event fired from inside a portal will propagate
 </html>
 ```
 
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
+在 `#app-root` 里的 `父` 组件能够捕获到未被捕获的从兄弟节点 `#modal-root` 冒泡上来的事件。
 
 ```js{28-31,42-49,53,61-63,70-71,74}
 // These two containers are siblings in the DOM
@@ -149,6 +145,6 @@ function Child() {
 ReactDOM.render(<Parent />, appRoot);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
+[**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/jGBWpE)
 
-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.
+在父组件里捕获一个来自 portal 冒泡上来的事件,使之能够在开发时具有不完全依赖于 portals 的更为灵活的抽象。例如,如果你在渲染一个 `<Modal />` 组件,无论其是否采用 portals 实现,父组件都能够捕获其事件。

From 359cebd56fb44f7e1f2f67c953ad7ef0c0150b1a Mon Sep 17 00:00:00 2001
From: Bocong Zhao <zhaobocong@hotmail.com>
Date: Fri, 1 Mar 2019 07:48:05 -0500
Subject: [PATCH 2/8] Fixed tree and modal translation

---
 content/docs/portals.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index dbcd61f70a..0a1140c569 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -42,7 +42,7 @@ render() {
 > 
 > 当在使用 portals 时, 记住[管理键盘焦点](/docs/accessibility.html#programmatically-managing-focus)就变得尤为重要。
 >
-> 对于模态框,通过遵循[WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
+> 对于模态对话框,通过遵循[WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
 
 [**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/yzMaBd)
 
@@ -50,7 +50,7 @@ render() {
 
 尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且不管 *DOM 树* 中的位置,那么无论其子节点是否是 portal,功能特性比如 context 的工作原理都是不变的。
 
-这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树* 的祖先,即便这些元素并不是 *DOM tree* 中的祖先。假设如下 HTML 结构:
+这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树* 的祖先,即便这些元素并不是 *DOM 树* 中的祖先。假设如下 HTML 结构:
 
 ```html
 <html>

From 26c59b1178ce7f304bfcc05fe9eea12774e005f3 Mon Sep 17 00:00:00 2001
From: Yuqing Chen <mr.chenyuqing@live.com>
Date: Fri, 22 Mar 2019 09:28:34 -0400
Subject: [PATCH 3/8] Apply suggestions from code review

Co-Authored-By: zbc <zhaobocong@hotmail.com>
---
 content/docs/portals.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 0a1140c569..d72aa7913e 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -12,7 +12,7 @@ ReactDOM.createPortal(child, container)
 
 ## 用法 {#usage}
 
-通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被装载到 DOM 节点中离其最近的父节点:
+通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点:
 
 ```js{4,6}
 render() {
@@ -42,7 +42,7 @@ render() {
 > 
 > 当在使用 portals 时, 记住[管理键盘焦点](/docs/accessibility.html#programmatically-managing-focus)就变得尤为重要。
 >
-> 对于模态对话框,通过遵循[WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
+> 对于模态对话框,通过遵循 [WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
 
 [**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/yzMaBd)
 
@@ -50,7 +50,7 @@ render() {
 
 尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且不管 *DOM 树* 中的位置,那么无论其子节点是否是 portal,功能特性比如 context 的工作原理都是不变的。
 
-这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树* 的祖先,即便这些元素并不是 *DOM 树* 中的祖先。假设如下 HTML 结构:
+这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树*的祖先,即便这些元素并不是 *DOM 树* 中的祖先。假设存在如下 HTML 结构:
 
 ```html
 <html>
@@ -61,7 +61,7 @@ render() {
 </html>
 ```
 
-在 `#app-root` 里的 `父` 组件能够捕获到未被捕获的从兄弟节点 `#modal-root` 冒泡上来的事件。
+在 `#app-root` 里的 `Parent` 组件能够捕获到未被捕获的从兄弟节点 `#modal-root` 冒泡上来的事件。
 
 ```js{28-31,42-49,53,61-63,70-71,74}
 // These two containers are siblings in the DOM

From f3ee141ad337ac16b4356db9dc75662474ba9348 Mon Sep 17 00:00:00 2001
From: Bocong Zhao <zhaobocong@hotmail.com>
Date: Fri, 22 Mar 2019 09:42:09 -0400
Subject: [PATCH 4/8] Correct the mismatched line error

---
 content/docs/portals.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index d72aa7913e..ba6ed6613a 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -3,7 +3,9 @@ id: portals
 title: Portals
 permalink: docs/portals.html
 ---
+
 Portals 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
+
 ```js
 ReactDOM.createPortal(child, container)
 ```
@@ -24,6 +26,7 @@ render() {
   );
 }
 ```
+
 然而,有时候将子元素插入到 DOM 节点中的不同位置也是有好处的:
 
 ```js{6}
@@ -36,6 +39,7 @@ render() {
   );
 }
 ```
+
 对于 portals 的一个典型用例是当父组件有 `overflow: hidden` 或 `z-index` 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框:
 
 > 注意:

From a9f16ea20b7f0ed6241fd64d615420918ef072d5 Mon Sep 17 00:00:00 2001
From: Bocong Zhao <zhaobocong@hotmail.com>
Date: Thu, 28 Mar 2019 14:41:38 -0400
Subject: [PATCH 5/8] Add translation to comments and apply suggestion

---
 content/docs/portals.md | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index ba6ed6613a..fe37bbaafe 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -18,7 +18,7 @@ ReactDOM.createPortal(child, container)
 
 ```js{4,6}
 render() {
-  // React mounts a new div and renders the children into it
+  // React 挂载了一个新的 div, 并且把子元素渲染其中
   return (
     <div>
       {this.props.children}
@@ -31,8 +31,8 @@ render() {
 
 ```js{6}
 render() {
-  // React does *not* create a new div. It renders the children into `domNode`.
-  // `domNode` is any valid DOM node, regardless of its location in the DOM.
+  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
+  // 不管 `domNode` 在 DOM 中的位置,它都是任意一个有效的 DOM 节点,。
   return ReactDOM.createPortal(
     this.props.children,
     domNode
@@ -52,7 +52,7 @@ render() {
 
 ## 通过 Portals 进行事件冒泡 {#event-bubbling-through-portals}
 
-尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且不管 *DOM 树* 中的位置,那么无论其子节点是否是 portal,功能特性比如 context 的工作原理都是不变的。
+尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且与 *DOM 树* 中的位置无关,那么无论其子节点是否是 portal,像 context 这样的功能特性都是不变的。
 
 这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 *React 树*的祖先,即便这些元素并不是 *DOM 树* 中的祖先。假设存在如下 HTML 结构:
 
@@ -68,7 +68,7 @@ render() {
 在 `#app-root` 里的 `Parent` 组件能够捕获到未被捕获的从兄弟节点 `#modal-root` 冒泡上来的事件。
 
 ```js{28-31,42-49,53,61-63,70-71,74}
-// These two containers are siblings in the DOM
+// 在 DOM 中有两个容器是兄弟级 (siblings)
 const appRoot = document.getElementById('app-root');
 const modalRoot = document.getElementById('modal-root');
 
@@ -79,14 +79,14 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
-    // The portal element is inserted in the DOM tree after
-    // the Modal's children are mounted, meaning that children
-    // will be mounted on a detached DOM node. If a child
-    // component requires to be attached to the DOM tree
-    // immediately when mounted, for example to measure a
-    // DOM node, or uses 'autoFocus' in a descendant, add
-    // state to Modal and only render the children when Modal
-    // is inserted in the DOM tree.
+    // 在 Modal 的所有子元素被挂载后,
+    // 这个 portal 元素会被嵌入到 DOM 树中,这意味着子元素
+    // 将被挂载到一个分离的 DOM 节点中。
+    // 当挂载时,如果一个子组件需要被立即连接回这个 DOM 树时,
+    // 例如衡量一个 DOM 节点,
+    // 或者在后代节点中使用 ‘autoFocus’,
+    // 则需添加 state 到 Modal 中,并且当 Modal 嵌入到 DOM 树时,
+    // 只会渲染子元素。
     modalRoot.appendChild(this.el);
   }
 
@@ -110,9 +110,9 @@ class Parent extends React.Component {
   }
 
   handleClick() {
-    // This will fire when the button in Child is clicked,
-    // updating Parent's state, even though button
-    // is not direct descendant in the DOM.
+    // 当子元素里的按钮被点击时,这个将会被触发
+    // 更新父元素的 state,即使这个按钮
+    // 在 DOM 中不是直接关联的后代(descendant)
     this.setState(state => ({
       clicks: state.clicks + 1
     }));
@@ -137,8 +137,8 @@ class Parent extends React.Component {
 }
 
 function Child() {
-  // The click event on this button will bubble up to parent,
-  // because there is no 'onClick' attribute defined
+  // 这个按钮的点击事件会冒泡到父元素
+  // 因为这里没有定义 'onClick' 属性
   return (
     <div className="modal">
       <button>Click</button>

From 5db53519bbc9afb742428e2264b60fad2482423b Mon Sep 17 00:00:00 2001
From: Bocong Zhao <zhaobocong@hotmail.com>
Date: Fri, 29 Mar 2019 09:45:17 -0400
Subject: [PATCH 6/8] Apply suggestions

---
 content/docs/portals.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index fe37bbaafe..03f13fdbcc 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -32,7 +32,7 @@ render() {
 ```js{6}
 render() {
   // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
-  // 不管 `domNode` 在 DOM 中的位置,它都是任意一个有效的 DOM 节点,。
+  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
   return ReactDOM.createPortal(
     this.props.children,
     domNode
@@ -80,13 +80,13 @@ class Modal extends React.Component {
 
   componentDidMount() {
     // 在 Modal 的所有子元素被挂载后,
-    // 这个 portal 元素会被嵌入到 DOM 树中,这意味着子元素
-    // 将被挂载到一个分离的 DOM 节点中。
-    // 当挂载时,如果一个子组件需要被立即连接回这个 DOM 树时,
+    // 这个 portal 元素会被嵌入到 DOM 树中,
+    // 这意味着子元素将被挂载到一个分离的 DOM 节点中。
+    // 如果要求子组件在挂载时可以立刻接入 DOM 树,
     // 例如衡量一个 DOM 节点,
     // 或者在后代节点中使用 ‘autoFocus’,
-    // 则需添加 state 到 Modal 中,并且当 Modal 嵌入到 DOM 树时,
-    // 只会渲染子元素。
+    // 则需添加 state 到 Modal 中,
+    // 仅当 Modal 被插入 DOM 树中才能渲染子元素。
     modalRoot.appendChild(this.el);
   }
 
@@ -110,9 +110,9 @@ class Parent extends React.Component {
   }
 
   handleClick() {
-    // 当子元素里的按钮被点击时,这个将会被触发
-    // 更新父元素的 state,即使这个按钮
-    // 在 DOM 中不是直接关联的后代(descendant)
+    // 当子元素里的按钮被点击时,
+    // 这个将会被触发更新父元素的 state,
+    // 即使这个按钮在 DOM 中不是直接关联的后代
     this.setState(state => ({
       clicks: state.clicks + 1
     }));

From 9fe027e0f103c09a51c09582fb804c1384ff227d Mon Sep 17 00:00:00 2001
From: Matt <mr.chenyuqing@live.com>
Date: Thu, 11 Apr 2019 22:04:28 +0800
Subject: [PATCH 7/8] update doc by yuqingc

---
 content/docs/portals.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 03f13fdbcc..4ec170b5d7 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -4,7 +4,7 @@ title: Portals
 permalink: docs/portals.html
 ---
 
-Portals 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
+Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
 
 ```js
 ReactDOM.createPortal(child, container)
@@ -18,7 +18,7 @@ ReactDOM.createPortal(child, container)
 
 ```js{4,6}
 render() {
-  // React 挂载了一个新的 div, 并且把子元素渲染其中
+  // React 挂载了一个新的 div,并且把子元素渲染其中
   return (
     <div>
       {this.props.children}
@@ -40,17 +40,17 @@ render() {
 }
 ```
 
-对于 portals 的一个典型用例是当父组件有 `overflow: hidden` 或 `z-index` 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框:
+一个 portal 的典型用例是当父组件有 `overflow: hidden` 或 `z-index` 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框:
 
 > 注意:
 > 
-> 当在使用 portals 时, 记住[管理键盘焦点](/docs/accessibility.html#programmatically-managing-focus)就变得尤为重要。
+> 当在使用 portal 时, 记住[管理键盘焦点](/docs/accessibility.html#programmatically-managing-focus)就变得尤为重要。
 >
 > 对于模态对话框,通过遵循 [WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
 
 [**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## 通过 Portals 进行事件冒泡 {#event-bubbling-through-portals}
+## 通过 Portal 进行事件冒泡 {#event-bubbling-through-portals}
 
 尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 *React 树*, 且与 *DOM 树* 中的位置无关,那么无论其子节点是否是 portal,像 context 这样的功能特性都是不变的。
 
@@ -151,4 +151,4 @@ ReactDOM.render(<Parent />, appRoot);
 
 [**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/jGBWpE)
 
-在父组件里捕获一个来自 portal 冒泡上来的事件,使之能够在开发时具有不完全依赖于 portals 的更为灵活的抽象。例如,如果你在渲染一个 `<Modal />` 组件,无论其是否采用 portals 实现,父组件都能够捕获其事件。
+在父组件里捕获一个来自 portal 冒泡上来的事件,使之能够在开发时具有不完全依赖于 portal 的更为灵活的抽象。例如,如果你在渲染一个 `<Modal />` 组件,无论其是否采用 portal 实现,父组件都能够捕获其事件。

From 0a4cb1d127760f9f7bfe500eac8bc9ee58fb2079 Mon Sep 17 00:00:00 2001
From: Matt <mr.chenyuqing@live.com>
Date: Fri, 12 Apr 2019 10:53:47 +0800
Subject: [PATCH 8/8] =?UTF-8?q?doc:=20=E8=AF=95=E4=B8=80=E8=AF=95=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E5=B0=9D=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/portals.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 4ec170b5d7..f29bb32fab 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -48,7 +48,7 @@ render() {
 >
 > 对于模态对话框,通过遵循 [WAI-ARIA 模态开发实践](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal),来确保每个人都能够运用它。
 
-[**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/yzMaBd)
+[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/yzMaBd)
 
 ## 通过 Portal 进行事件冒泡 {#event-bubbling-through-portals}
 
@@ -149,6 +149,6 @@ function Child() {
 ReactDOM.render(<Parent />, appRoot);
 ```
 
-[**在 CodePen 上试一试**](https://codepen.io/gaearon/pen/jGBWpE)
+[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/jGBWpE)
 
 在父组件里捕获一个来自 portal 冒泡上来的事件,使之能够在开发时具有不完全依赖于 portal 的更为灵活的抽象。例如,如果你在渲染一个 `<Modal />` 组件,无论其是否采用 portal 实现,父组件都能够捕获其事件。