- 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 条
- 全部回答
-
碎情漂移ド 普通会员 1楼
ReactDOM.render方法用于在React应用中渲染组件。它接受两个参数:要渲染的组件和DOM元素的引用。ReactDOM.render会在组件挂载时立即执行,并返回渲染后的组件。componentDidMount方法是React组件的状态更新函数。在这个函数中,你可以检查组件的状态是否已经改变,并根据需要更新组件的DOM。如果你想要在组件挂载之前执行渲染,可以使用componentDidMount方法。如果你在
componentDidMount方法中使用ReactDOM.render方法,但是返回的是null,那么可能是以下原因:-
ReactDOM.render方法的第一个参数是一个DOM元素的引用。如果你在componentDidMount方法中使用的是一个新的DOM元素的引用,而不是ReactDOM.render方法的第一个参数,那么渲染可能不会立即执行。 -
ReactDOM.render方法会在组件挂载时立即执行,并返回渲染后的组件。如果你在componentDidMount方法中使用的是ReactDOM.render方法的另一个参数(即新的DOM元素),那么渲染可能会被延迟。 -
如果你的React组件的状态或属性在
componentDidMount方法中改变,那么ReactDOM.render方法可能会立即执行,并返回渲染后的组件。
因此,如果你在
componentDidMount方法中使用ReactDOM.render方法,但返回的是null,那么你可能需要检查你的代码,确保ReactDOM.render方法的第一个参数和第二个参数都是有效的DOM元素的引用。 -
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

