React中Portals的使用

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM元素上的)。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM节点的优秀的方案

• 第一个参数(child)是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment
• 第二个参数(container)是一个 DOM 元素

通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点。然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的。

比如说我们准备开发一个Modal组件。它可以将它的子组件渲染到屏幕的中间位置。我们希望它是独立的。

样式：

代码如下：

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
class Modal extends PureComponent{
  render(){
    //传两个参数,1.哪些要背渲染进去  2.挂载的dom
    return ReactDOM.createPortal( 
      this.props.children,
      document.getElementById('modal') //挂载的dom
    )
  }
}
class Home extends PureComponent{
  render(){
    return (
      <div>
        <h2>Home</h2>
        <Modal>
          <h2>Title</h2>
        </Modal>
      </div>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
      </div>
    )
  }
}