react 方法组件构造 Loading 的使用

这里的方法组件并不是 指的 函数组件，而是可以像方法一样使用的组件

就好像是 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;

调用的时候，可以直接导入，然后  

使用 Loading.show() 和 loading.remove() 去除这个loading 状态，而不需要 一层一层地包裹，直接写进方法里就可以了