react Portal实现传送门（可以把组件挂载到任意节点上）

react Portal实现传送门（可以把组件挂载到任意节点上）

流程图

react Portal

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

ReactDOM.createPortal(child,container);

第一个参数child是可渲染的react子项，container是需要挂载到dom元素

使用方法

第一步： 引入createPortal 在react-dom中

import {createPortal} from 'react-dom'

第二步：在constructor定义参数container 就是this.node

利用window.document 记录doc参数 = > 定义this.node 创建div节点=>利用constructor当前的body下挂载在一个div节点上

constructor(props){
   super(props)
  //  记录参数 利用window.document
  const doc =  window.document
  // 定义this.node 创建一个div节点
  this.node = doc.createElement("div")
  // 当前的body下挂载一个div节点
  doc.body.appendChild(this.node)
 }

第三步： 利用createPortal( )方法传递两个参数

render() {
    // 实现createPortal
    return createPortal(
      <div className='dialog'>
        <h3>
          Modal
        </h3> 

      </div>, this.node
    )
  }

第四步：在componetWillUnmout取消绑定，不然会造成重复渲染

 // 在willUnmount中实现订阅和取消订阅
 componentWillUnmount () {
   // 删除this.node
   window.document.body.removeChild(this.node)
 }