延遲父組件渲染，直到所有子組件渲染reactjs

Question

我是一個初學者來回應。 我正在渲染一個組件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" />;
  }
}

}

我想顯示一個加載符號，直到所有子元素都呈現出來。 當前代碼無法正常工作。 有什么方法可以執行此操作嗎？

Answer 1

我建議您在子組件的父組件狀態中具有標志 ，例如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);
 }

您可以檢查所有這些標志是否為真，直到顯示加載程序。

Answer 2

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>
        );
    }
    }