我是一个初学者,可以做出反应。我正在渲染一个组件A。此组件中还有5个子组件。他们每个人都在请求一个API并从api加载信息。我想显示一个加载符号,直到所有响应都被接收并呈现。我真的不确定如何实际执行此操作。例如:
class Home extends React.Component {
constructor() {
super();
this.state = {
isLoggedIn: getCookie("Authorization") ? true : false,
loading: true
};
}
componentDidMount() {
this.setState({ loading: false });
}
render() {
document.body.style = "background: #fafafa;";
if (this.state.isLoggedIn) {
return (
<div>
{this.state.loading ? <Loading /> : ""}
<Child1 />
<Child2 />
<Child3 />
Welcome Home, user
</div>
);
} else {
// User not logged, error
return <Redirect to="/login" />;
}
}
}
我想显示一个加载符号,直到所有子元素都呈现出来。当前代码无法正常工作。有什么方法可以执行此操作吗?
答案 0 :(得分:0)
我建议您在父组件状态中具有标志,对于子组件,例如 child1Loaded,child2Loaded等... 父组件中的处理程序,以从其componentDidMount()
中对其进行更新。
this.state = {
isLoggedIn: getCookie("Authorization") ? true : false,
loading: true,
child1Loaded:false,
child2Loaded:false,
child3Loaded:false,
child4Loaded:false,
child5Loaded:false,
};
updateLoadedFlagHandler = (childName) =>{
this.setState({[childName]:true});
}
render() {
document.body.style = "background: #fafafa;";
if (this.state.isLoggedIn) {
return (
<div>
{this.state.loading ? <Loading /> : ""}
<Child1 loadedUpdateHandler={updateLoadedFlagHandler} childName='child1Loaded'/>
<Child2 loadedUpdateHandler={updateLoadedFlagHandler} childName='child2Loaded'/>
<Child3 loadedUpdateHandler={updateLoadedFlagHandler} childName='child3Loaded'/>
Welcome Home, user
</div>
);
} else {
// User not logged, error
return <Redirect to="/login" />;
}
}
子组件:
componentDidMount(){
this.props.loadedUpdateHandler(this.props.childName);
}
您可以检查所有这些标志是否为 true ,直到显示加载程序。
答案 1 :(得分:0)
class Home extends React.Component {
constructor() {
super();
this.state = {
isLoggedIn: getCookie("Authorization") ? true : false,
loading: true,
childrenLength: 3
childrenLoaded: 0
};
}
componentDidMount() {
this.setState({ loading: false });
}
onChildLoad = () => { //Using arrow functions instead of binding
this.setState({childrenLoaded: this.state.childrenLoaded + 1}, () => {
if(this.state.childrenLoaded === this.state.childrenLength){
this.setState({loading: false});
}
})
}
render() {
document.body.style = "background: #fafafa;";
if (this.state.isLoggedIn) {
return (
<div>
{this.state.loading && <Loading />}
<div>
<Child1 onChildLoad={this.onChildLoad} loading={this.state.loading}/>
<Child2 onChildLoad={this.onChildLoad} loading={this.state.loading}/>
<Child3 onChildLoad={this.onChildLoad} loading={this.state.loading}/>
Welcome Home, user
</div>
</div>
);
} else {
// User not logged, error
return <Redirect to="/login" />;
}
}
}
这可能不是最平滑的解决方案,但它可能会起作用
编辑
假设您必须在子组件中加载某些内容,则可以执行以下操作:
class Child extends React.Component {
constructor() {
super();
this.state = {
isLoaded: false
};
}
componentDidMount() {
// Load something here...
this.setState({isLoaded: true}, () => this.props.onChildLoad());
}
render() {
return (
<div>
{
// The content of the child will only be displayed if the component is loaded itself and the parent component is fully loaded as well
(this.state.isLoaded && !this.props.loading) &&
<div>
Here is your child
</div>
}
</div>
);
}
}