Question

我的子组件需要从服务器获取数据。子组件将延迟显示，因为获取数据后我会更新子状态。

我想要的是同时进行完整的父级和子级显示。

有什么好的方法让孩子准备好后让父母渲染？还是让他们一起展示？

Answer 1

如果您使用的是redux，则可以使用状态变量来通知是否正在获取数据或已完成获取数据，然后使用该变量来知道父级是否应该呈现

 const mapStateToProps = (state) => {
    const {dataFetched} = state;
    return {dataFetched};
 }

 ..............

 render() {
    const {dataFetched} = this.props;
    if (dataFetched) {
      return <Parent> <Child /> </Parent>
    }
    return <div> Loading ... </div>
 }

如果您不使用redux，则可以通过道具将dataFetched状态传递给父对象。

 dataFetched = () => {
   this.setState({'dataFetched': true})
 }


 render() {
   if (this.state.dataFetched) {
     return (<Parent>
               <Child 
                 dataFetched={this.dataFetched}
               />
             </Parent>)
   }
   return <Child 
       dataFetched={this.dataFetched}
     />
 }

在这两种情况下，您都需要让父母知道孩子实际上已经完成了数据提取。您的操作方式完全取决于您的选择：）

准备好孩子后反应渲染父母

1 个答案: