九、Portals
React16的Portals特性让我们可以把组件渲染到当前组件树以外的DOM节点上。典型的应用场景是渲染全局的应用弹框,使用Portals后,任意组件都可以把弹框组件渲染到根节点上,以方便弹框的显示。
ReactDOM.createPortal(child,container)
child是可以被渲染React节点,例如React元素、由React元素组成的数组、字符串等。container是一个DOM元素,child被挂载到这个DOM。
创建一个Modal,挂载在根组件:
class Modal extends React.Componnet {
constructor(props){
super(props);
this.container = document.createElement("div");
document.body.appendChild(this.container);
}
componentWillUnmount(){
document.body.removeChild(this.container);
}
render(){
return ReactDOM.createPortal(
<div className="modal">
<span className="close" onClick={this.props.onClose}>×</span>
<div className="content">
{this.props.children}
</div>
</div>,
this.container
);
}
}
在APP中使用Modal:
class App extends React.Componnet {
constructor(props){
super(props);
this.state={showModal: true}
}
closeModal = () => {
this.setState({showModal: true});
}
render(){
return (
<div>
{this,state.showModal &&
<Modal onClose = {this.closeModal}>Modal Dialog</Modal>
</div>
)
}
}