react组件之Portals--组件跳出原DOM结构

能力：将子节点渲染到存在于父组件以外的DOM节点

语法：ReactDOM.createPortal(child, container)

参数：
child：任何可渲染的React子元素
container：一个DOM元素（你想要渲染到的目标容器）

demo：

render() {
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    );
}

应用场景：
当父组件有overflow: hidden或z-index样式，而你需要子组件在视觉上跳出容器时。【对话框、悬浮卡及提示框等】

事件冒泡：一个从protal内部触发的事件会一直冒泡到react树的祖
先，如以下DOM结构中，#app-root中的Parent组件可以捕获到从兄弟节点#modal-root冒泡上来的事件。

  
    

    

  


class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.el=document.createElement('div');
    }
    componentDidMount() {
        modalRoot.appendChild(this.el);
    }
    componentWillUnmount() {
        modalRoot.removeChild(this.el);
    }
    render() {
        ReactDOM.createPortal(
            this.props.child,
            this.el
        );
    }
}
class Parent extends React.Component {
    render() {
        
            click
        
    }
}
ReactDOM.render(, appRoot);