react 方法组件

在react antUI 框架中，引入message组件，随时随地调用message.success(); message.error()就可以实现；
思考：ant UI中 message组件是怎么实现的，没有插入标签，没有引入css，随调随用；

简单点 就是 在方法中创建真是dom ，将组件插入；

App.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom'
import Loading from './loading/index'

class App extends Component{
 constructor(props){
    super(props);
    this.state={
      data:[],
      loading:false
    }
 }
 componentDidMount(){
   loading.show();
   setTimeout(()=>{
     loading.hide();
   },2000)
 }
  render(){
    return(
      <div >
        app
      </div>
    )
  }
}

let node = null
const loading = {
    show(){
        node = document.createElement('div');
        document.body.appendChild(node);
        ReactDOM.render(<Loading/>,node)
    },
    hide(){
        if(node){
            ReactDOM.unmountComponentAtNode(node)
            document.body.removeChild(node)
        }
    }
}
export default App

Loading.js

import React from 'react';
import ReactDOM from 'react-dom'
import './index.scss'

class Loading extends React.Component{
    render(){
        return(
            <div className="loading">
                <div className="loading__mask"></div>
                <div className="loading__content">
                    loading
                </div>
            </div>
        )
    }
}
export default Loading;```