ReactDOM.createPortal

createPortal 的调用方式是：

ReactDOM.createPortal(child, container)

第一个参数是一个 renderable React child
第二个参数是一个DOM元素

将index.html页面添加DOM节点来验证createPortal如何渲染

    <div id="root"></div>
    <div id="another-root"></div>
    <div id="another-container"></div>

大白话的意思是：
通过createPortal渲染的元素会被添加到另外的节点，同时点击事件会被触发；
而通过ReactDOM.render渲染的元素添加到新节点，但是点击事件没有触发。

import React from 'react';
import ReactDOM, { createPortal } from 'react-dom';

class HelloFromPortal extends React.Component {
    render(){
        return (
            <div onClick={() => {alert("我爸应该知道我被点击了")}}>
              我是传送门里出来的Portal
            </div>
        )
    }

}

class AmISameAsPortal extends React.Component {
    render() {
        return(
            <div onClick={() => {alert("是不是从传送门里出来呢？ 我妈应该知道我被点击了")}}>
              是不是从传送门里出来呢？ not Portal
            </div>
        )
    }
}

class HelloReact extends React.Component {
    render(){
        return (
            <div>
                <h1>父组件</h1>
                <div onClick={() => {alert('YES  Dispaly')}}>
                    {createPortal(<HelloFromPortal />, document.getElementById('another-root'))}
                </div>
                XXXX
                XXXX
                <div onClick={() => {alert("No display")}}>
                    {ReactDOM.render(<AmISameAsPortal />, document.getElementById('another-container'))}
                </div>

            </div>


        )
    }
}

ReactDOM.render(<HelloReact />, document.getElementById('root'));