定义

Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。

ReactDOM.createPortal(child,container);

第一个参数child是可渲染的react子项，比如元素，字符串或者片段等。第二个参数container是一个DOM元素。

用法

普通的组件，子组件的元素将挂载到父组件的DOM节点中。

render() {
 // React 挂载一个div节点，并将子元素渲染在节点中
return (
 <div>
 {this.props.children}
 </div>
 );
 }

有时需要将元素渲染到DOM中的不同位置上去，这是就用到的portal的方法。

render(){
 // 此时React不再创建div节点，而是将子元素渲染到Dom节点上。domNode，是一个有效的任意位置的dom节点。
return ReactDOM.createPortal(
 this.props.children,
 domNode
 )
 }

一个典型的用法就是当父组件的dom元素有 overflow:hidden 或者z-inde 样式，而你又需要显示的子元素超出父元素的盒子。举例来说，如对话框，悬浮框，和小提示。

事件冒泡

虽然通过portal渲染的元素在父组件的盒子之外，但是渲染的dom节点仍在React的元素树上，在那个dom元素上
的点击事件仍然能在dom树中监听到。

import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 const getDiv = () => {
 const div = document.createElement('div');
 document.body.appendChild(div);
 return div;
 };

const withPortal = (WrappedComponent) => {
 class AddPortal extends Component {
 constructor(props) {
 super(props);
 this.el = getDiv();
 }
 componentWillUnmount() {
 document.body.removeChild(this.el);
 }
 render(props) {
 return ReactDOM.createPortal(<WrappedComponent {...props} />, this.el);
 }

}
 return AddPortal;
 };
 class Modal extends Component {
    render() {
        return (
            <div>
                <div>amodal content</div>
                <button type="button">Click</button>
            </div>
        );
    }
 }
 const PortalModal = withPortal(Modal);
 class Page extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(state => ({
            clicks: state.clicks + 1
        }));
    }
    render() {
        return (
            <div onClick={this.handleClick}>
                <h3>ppppppppp</h3>
                <h3>num: {this.state.clicks}</h3>
                <PortalModal />
            </div>
        );
    }
 }
 export default Page;