Day23 Portal

Portal为不产生parent节点的情形下，将children渲染到DOM节点上面的方法。起手的宣告方式如下:

ReactDOM.createPortal(child, container)

第一个参数child可放入任一个React元素，例如 element、string 或者 fragment。
第二个参数放任一DOM节点。

使用时机

当parent节点设有overflow: hidden 或者 z-index等样式时，若需要子节点传递到外部的情况时便可以使用，如一些hover效果或是弹窗。

使用方式

通常当 component 的render方法回传一个React元素时，此元素会作为 child 被传进最接近的parent节点中：

render() {
  // React 产生一个新的 div 并将 children 渲染 进去
  return (
    <div>
      {this.props.children}
    </div>
  );
}

使用portal将children传进parent节点之外:

render() {
  // 不产生div(parent节点)，将child放入其他任一DOMNode中
  return ReactDOM.createPortal(
    this.props.children,
   DOMNode
  );
}