进击的 react Protals组件使用

Portals是什么？用来干啥？。
翻译过来 就是“传送门”，是React 16版本中新加的组件功能。
使用场景:
当父组件有overflow,z-index样式的时候，但是你需要子组件在视觉上能够跳出容器，
也就是说能显示出来。比如对话框，提示框等。

下面这个例子可以直接在项目中使用

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

function createPortal() {
  class Portal extends React.Component {
    constructor(props) {
      super(props);
      this.el = document.createElement('div');
      document.body.appendChild(this.el);
    }
    componentDidMount() {
      document.body.appendChild(this.el);
    }
    componentWillUnmount() {
      document.body.removeChild(this.el);
    }
    render() {
      return ReactDOM.createPortal(
        this.props.children,
        this.el,
      );
    }
  }
  Portal.propTypes = {
    children: PropTypes.any.isRequired,
  };
  return Portal;
}
export default createPortal();