Portals

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}> &times; </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