ReactDOM.render为什么在componentDIdMount中执行返回的是null?

Question

我写了一个全局的提示组件，手动调用都正常，但是我在页面组件中的componentDidMount内调用全局组件的时候ReactDOM.render返回的就是null，但是将调用改为异步或者其他地方调用返回的就是Container的实例，不知道为什么，求大神解答！ 为了简化问题，代码如下所示

componentDidMount(){
    const div=document.createElement('div');
    const container=ReactDOM.render(<Container />,div)
    document.body.appendChild(div);    
    console.log(container)
}

Container代码如下

import Hint from './hint';
import React,{Component} from 'react';
import {CSSTransition,TransitionGroup} from 'react-transition-group'

class Container extends Component{
    constructor(props){
        super(props);
        this.state={
            message:[]
        }
        this.addMsg=this.addMsg.bind(this)
        this.createKey=this.createKey.bind(this)
        this.removeMsg=this.removeMsg.bind(this)
    }
    addMsg(msg){
        let { message }=this.state;
        msg.key=this.createKey();
        message.push(msg);
        this.setState({message});
        console.log(message)
        if(msg.duration>0){
            let autoClose=setTimeout(_=>{
                this.removeMsg(msg.key);
                clearTimeout(autoClose)
            }, msg.duration)
        }
        return ()=>{
            this.removeMsg(msg.key)
        }
    }
    removeMsg(key){
        this.setState(prevState=>({
            message:prevState.message.filter(msg=>{
                console.log(msg.key===key)
                if(msg.key===key){
                    if(msg.onClose){msg.onClose()}
                    return false
                }
                console.log(123)
                return true
            })
        }),()=>{
            console.log(this.state)
        })
    }
    createKey(){
        const { message }=this.state;
        return `${new Date().getTime()}-${message.length}`
    }
    render(){
        return(
            <TransitionGroup>
                {
                    this.state.message.map(msg=>(
                        <CSSTransition
                            key={msg.key}
                            timeout={300}
                            classNames="msg"
                        >
                            <Hint {...msg} close={this.removeMsg} />
                        </CSSTransition>
                    ))
                }
            </TransitionGroup>
        )
    }
}

export default Container

感谢各位大佬！

Answer 1

componentDidMount(){
    const div=document.createElement('div');
    // ReactDOM.render 不保证是同步的.
    ReactDOM.render(<Container ref={container => console.log(container)}/>,div)
    document.body.appendChild(div);    
    
}