ReactDOM.createPortal

createPortal 的调用方式是：

ReactDOM.createPortal(child, container)

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

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

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

image.png

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

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

}

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

class HelloReact extends React.Component {
    render(){
        return (
            

                
父组件
                
 {alert('YES  Dispaly')}}>
                    {createPortal(, document.getElementById('another-root'))}
                
                XXXX
                XXXX
                
 {alert("No display")}}>
                    {ReactDOM.render(, document.getElementById('another-container'))}
                

            


        )
    }
}

ReactDOM.render(, document.getElementById('root'));