React(精读官方文档) -高级指引 - Portals

Portals

• Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

  ReactDOM.createPortal(child, container)
  

• 第一个参数（child）:任何可渲染的 React 子元素。例如一个元素，字符串或 fragment
• 第二个参数（container）：一个 DOM 元素

用法

• 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：

render() {
  // React 挂载了一个新的 div，并且把子元素渲染其中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

• 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：

render() {
  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

• 一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框 等