は動的にthatsの完成までは、子供がレンダリングされる準備ができていない..私は</p> <pre><code><Parent> <Child1/> </Parent> <Parent> <Child2/> </Parent> </code></pre> <p>コンポーネント構造以下reactJSを持っている子どもたちがさまざまなAPI呼び出しを行う機能を持っている子供が

Question

をレンダリング上書き反応します。だから、私は親表示 持つための方法「のデータを待っているが...」がある と私は単純な方法をレンダリングしたいと思い、子供にAPI呼び出し

を行うには、子供にメソッドを呼び出しますそれをレンダリングアウトと子のメソッドを呼び出して試してみてください、私は二つのアプローチが、失敗した

1. の両方を試してみました取得APIコールが

   を終了したりしていないかどうかをチェックする必要はありません。.. React.Children .map（this.props.children、（child）=> child.doAPICall（））、この子はその関数avaiを持たないようです子供たちが完了した後で、それは何もレンダリングしないようlable

2. オーバーライドは、動的機能をレンダリングし、その後、APIはバック

   React.Children.map（this.props.children、（アイテムのレンダリングmthodを交換するために呼び出して、 I）=>
   （React.cloneElement（アイテム、{ レンダリング：（）=> falseを }））） これは私がrenderメソッド

どれでもアドバイスを小道具を上書きではなく、できるようになりますでしょう大いに飾られる

Answer 1

条件付きレンダリングを行う必要があります。私は次の2つの方法のいずれかで提案します：

• いずれかの親コンポーネントです。必要なAPI呼び出しを行ってデータをシードし、データが準備できたら子をレンダリングします。
• または子供の中で。データを（例えばcomponentDidMountなどで）呼び出してから、準備ができたらデータをレンダリングします。それまでは、何か他のもの、すなわち何らかのテキストや「読み込み中」というイメージをレンダリングするまで。

  render() { 
      return (
       <div> 
       {this.state.data? 
        <div>{this.state.data.somedata}</div> 
       : 
        <div>Loading...</div>} 
       </div> 
      ); 
  } 
  

  ：あなたは単に条件付きでの自身をレンダリングする子どもたちの中にレンダリングを行うことにした場合、条件付きか、親から子供をレンダリングすることを決定したかどうかは

、それは次のようになりますあるいは：

：

render() { 
    if (!this.state.data) { 
     return <div>Loading...</div> 
    } 
    return (
     <div> 
      <div>{this.state.data.somedata}</div> 
     </div> 
    ) 

} 

最後に、条件付きでレンダリングするためにも、より簡潔な方法は、この構文であります

render() { 
    return(
     <div> 
      {this.state.data && <div>{this.state.data.someField}</div>} 
     </div> 
    ); 
} 

または例えば

render() { 
    return this.state.data && <div>{this.state.data.someField}</div>; 
} 

...うまくいけば、あなたは感謝ジョンが..私はすべての子供にthis.state.dataをチェック避けるためにアイデア:)