react的portals传送门实现模态框

引言： 有时候我们需要使用某个组件不是按照正常的层级来显示，比如，我们在一个左侧为菜单，右侧为功能的系统里使用弹出框（类似于antdPro），如果弹出框按照层级展示在功能里，他的位置就会显得有些奇怪，我们想要的是弹出框在整个屏幕中间弹出来，而不是在功能里中心位置展示。

想要实现这个需求，必须打破常规。将弹出框在body中展示，这样弹出框和#root是同级的，就不再受左侧菜单的制约。

代码实现

传送门组件

import React, { Component } from "react";
import { createPortal } from "react-dom";

import PortalsContent from "./content";

export default class Portals extends Component {
    render() {
        return createPortal(
          <PortalsContent>{this.props.children}</PortalsContent>,
          document.body
        );
    }
}

传送门组件里内容

import React, { Component } from 'react';

export default class PortalsContent extends Component {
  render() {
    return (
      <div>
        传送门的内容
      </div>
    )
  }
}

注意：createPortal有两个参数，第一个是需要传送的组件，第二个是要传送到那里去，this.props.children是将该组件下的所有内容都展示出来

最终效果