账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ReactDOM.render为什么在componentDIdMount中执行返回的是null?
    26
    0

    我写了一个全局的提示组件,手动调用都正常,但是我在页面组件中的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

    感谢各位大佬!

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 碎情漂移ド 普通会员 1楼

      ReactDOM.render方法用于在React应用中渲染组件。它接受两个参数:要渲染的组件和DOM元素的引用。ReactDOM.render会在组件挂载时立即执行,并返回渲染后的组件。

      componentDidMount方法是React组件的状态更新函数。在这个函数中,你可以检查组件的状态是否已经改变,并根据需要更新组件的DOM。如果你想要在组件挂载之前执行渲染,可以使用componentDidMount方法。

      如果你在componentDidMount方法中使用ReactDOM.render方法,但是返回的是null,那么可能是以下原因:

      1. ReactDOM.render方法的第一个参数是一个DOM元素的引用。如果你在componentDidMount方法中使用的是一个新的DOM元素的引用,而不是ReactDOM.render方法的第一个参数,那么渲染可能不会立即执行。

      2. ReactDOM.render方法会在组件挂载时立即执行,并返回渲染后的组件。如果你在componentDidMount方法中使用的是ReactDOM.render方法的另一个参数(即新的DOM元素),那么渲染可能会被延迟。

      3. 如果你的React组件的状态或属性在componentDidMount方法中改变,那么ReactDOM.render方法可能会立即执行,并返回渲染后的组件。

      因此,如果你在componentDidMount方法中使用ReactDOM.render方法,但返回的是null,那么你可能需要检查你的代码,确保ReactDOM.render方法的第一个参数和第二个参数都是有效的DOM元素的引用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部