React弹出层组件一

react正常无法在父组件dom节点之外的其他节点创建组件，查文档发现react提供了Portals方法来实现：

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

文档地址：传送门

index.scss

//errortips
.errortips {
	position: fixed;
	top:0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 11;
	display: flex;
}


//errortips

@keyframes _fadeIn {
    0% {
      opacity: 0;
      transform: scale3d(.5, .5, .5);
    }
  
  
    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  ._fadeIn{
    .tipsBox{
      animation: _fadeIn .5s both;
    }
  }
  
  @keyframes _fadeOut {
    0% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  
    100% {
      opacity: 0;
      transform: scale3d(.5, .5, .5);
    }
  }
  
  
  ._fadeOut{
    .tipsBox{
      animation: _fadeOut .5s both;
    }
  }
  

.tipsBox{
	margin: auto;
	padding:10px 40px;
  color:#fff;
	font-size: 16px;
	line-height:1.8;
	border-radius:4px;
	background-color: rgba(0,0,0,.7);
}

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.scss";
export default class Layer extends React.Component{

    constructor(props) {

        super(props);

        this.el = document.createElement('div');

        this.el.className = 'errortips _fadeIn';

    }
    componentDidMount(){
        document.body.appendChild(this.el);
    }
    componentWillUnmount() {
        document.body.removeChild(this.el);
    }
    render() {
        return ReactDOM.createPortal((
            <span className="tipsBox">{this.props.msg}</span>
        ), this.el);
    }
}