Question

我尝试使用componentDidUpdate设置加载微调器组件，将state设置为true。在buildPosts()呈现之前，加载程序不会显示空白区域。如何在函数执行时显示Loader组件？

constructor() {
    super();
    this.state = {loaded: false};
}


onLoaded(){
    this.setState({loaded: true });
}

componentDidUpdate() {
    this.onLoaded();
}

buildPosts(posts) {
    return posts.map(post =>
        <Post post={post} key={post.id} />
    );
}
render() {
    const { posts, totalPages, pageNum = 1 } = this.props;


    return (
        this.state.loaded ? 
        (<div id="blog">
            {this.buildPosts(posts)}
            {this.buildPagination(parseInt(pageNum), totalPages)}
        </div>) : <Loader /> 
    );
}

Answer 1

假设您的装载机将在没有帖子时显示。您可能不需要load州。怎么样这样：

  render() {
    const { posts, totalPages, pageNum = 1 } = this.props;


        return (
            posts !== undefined && posts.length > 0 ? 
            (<div id="blog">
                {this.buildPosts(posts)}
                {this.buildPagination(parseInt(pageNum), totalPages)}
            </div>) : <Loader /> 
        );
  }

使用componentDidMount隐藏/显示组件

1 个答案: