在ReactJS中加载页面并不断重载组件
在ReactJS中加载页面并不断重载组件
提问于 2018-05-15 16:05:18
在我的项目中，我有一些组件，其中一个是div，它由其他几个组件组成，是一个按钮，它的使用就像一个菜单。
为了使加载页面覆盖，以防止组件充电期间的操作，我修改了我的代码：
1)包含在构造函数中：
this.state = {
isLoaded: false
}2)添加componentDidMount()方法：
componentDidMount() {
this.setState({
isLoaded: true
})
}3)更改渲染方法：
const isLoaded = this.state.isLoaded;
if (!isLoaded) {
document.getElementById("loadingPageHTML").style.display = "inline-block";
return(
<p className = "noShowIt"> Hola </p>
);
} else {
document.getElementById("loadingPageHTML").style.display = "none";
return (
<div className="MainMenuButtons">
...
}但是，当我在浏览器上调试时，我发现当我按下这些按钮中的一个时，流程总是在这个组件的render方法中进入，因此，即使第二个组件(具有相同的状态和条件)没有被加载，加载的页面display也始终是inline-block状态。
开发一个具有良好行为的加载层的方法是什么？
有没有可能用类似于jQuery中的ajaxStart函数的方式来做呢？
回答 1
Stack Overflow用户
发布于 2018-05-15 17:13:21
你在某种程度上混合了react组件和旧风格的web开发。
您可能希望基于isLoaded状态呈现加载组件或内容组件，而不是使用css和dom选择器。例如：
render () => (!isLoaded) ? <LoadingComponent /> : <Content />;
render() {
if (!isLoaded) {
return <LoadingComponent />;
} else {
return (<div> ... </div>);
}
}当状态改变时，呈现的组件将自动更新
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50345232
复制相关文章
相似问题
腾讯云开发者
