React的Portal是干什么的？

一、解决了什么问题？

React节点默认渲染到父节点下，Portal可以让节点渲染到非父节点的其他节点下面。Portal适用场景：当子组件需要从视觉上“跳出”其容器时，譬如对话框、悬浮卡、提示框等。

---

二、用法说明

1、React正常渲染节点

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

2、Portal渲染节点

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

---

三、参考链接：

• React的Portal是干什么的？