这里的方法组件并不是 指的 函数组件,而是可以像方法一样使用的组件
就好像是 ant-design 里的 message.success() 一样使用。
上代码
loading.css
.loading-container{
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
z-index:999;
}
.img{
position: absolute;
left: 50%;
top: 50%;
transform: -50% -50%;
}
loading.js
function Loading(props) {
console.log(props)
return <div className="loading-container">
<img className="img" src="./loading.gif"/>
</div>
}
// js 中万物皆对象,function 自然也可以作为对象存储 数据
Loading.show = function (props) {
this.div = document.createElement('div');
document.body.appendChild(this.div);
ReactDOM.render(<Loading {...props}/>, this.div);
}
Loading.remove = function () {
this.div && ReactDOM.unmountComponentAtNode(this.div); //从div中移除已挂载的Loading组件
this.div && this.div.parentNode.removeChild(this.div); //移除挂载的容器
}
export default Loading;
调用的时候,可以直接导入,然后