创建 portal。Portal 提供了一种将子节点渲染到已 DOM 节点中的方式,该节点存在于 DOM 组件的层次结构之外。
createPortal(child, container)
第一个参数子节点,第二个参数目标节点dom
案例
import React, {Component} from "react";
import {createPortal} from "react-dom";
export default class Dialog extends Component {
constructor(props) {
super(props);
const doc = window.document;
this.node = doc.createElement("div");
doc.body.appendChild(this.node);
}
componentWillUnmount() {
if (this.node) {
window.document.body.removeChild(this.node);
}
}
render() {
return createPortal(
<div className="dialog">
<h3>Dialog</h3>
</div>,
this.node
);
}
}