Portals
React 16的Portals特性让我们可以把组件渲染到当前组件树以外的 DOM节点上，这个特性典型的应用场景是渲染应用的全局弹框，使用 Portals后，任意组件都可以将弹框组件渲染到根节点上，以方便弹框的 显示。Portals的实现依赖ReactDOM的一个新的API：
ReactDOM.createPortal(child, container)
第一个参数child是可以被渲染的React节点，例如React元素、由 React元素组成的数组、字符串等，container是一个DOM元素，child将 被挂载到这个DOM节点。
普通情况下，组件的render函数返回的元素会被挂载在它的父级组件上。
然而，有些元素需要被挂载在更高层级的位置。最典型的应用场景：当父组件具有overflow: hidden或者z-index的样式设置时，组件有可能被其他元素遮挡，这个时候你就可以考虑要不要使用Portal使组件的挂载脱离父组件。例如：对话框，tooltip。
class Modal extends Component {
constructor(props) {
super(props);
this.container = document.createElement('div');
document.body.appendChild(this.container);
}
componentWillUnmount(){
document.body.removeChild(this.container);
console.log("Unmount");
}
render() {
return ReactDom.createPortal(
<div className ="modals">
{ <span className="close" onClick={this.props.onClose}> × </span> }
{ <div className="content"> {this.props.children}</div>}
</div>
, this.container);
}
}
在APP.js 中调用
class App extends Component {
constructor(props) {
super(props);
this.state = { showModal: true };
}
// 关闭弹框
closeModal = () => {
this.setState({ showModal: false });
};
render() {
return (
<div>
<h2>Dashboard</h2>
{this.state.showModal && (<Modal onClose={this.closeModal }>modal dialog</Modal>)}
</div>
);
}
}
1554007649593.png
