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);
}
}