反應動態覆蓋孩子渲染

我有以下reactJS組件結構反應動態覆蓋孩子渲染

<Parent> 
    <Child1/> 
</Parent> 
<Parent> 
    <Child2/> 
</Parent>

孩子有執行不同的API調用..直到這就是成品，孩子是不是準備好渲染的功能。那麼有沒有辦法讓我父母的顯示器「等待數據...」並調用子方法來做API調用

在孩子我想要一個簡單的渲染方法它沒有檢查，如果獲取API的調用已完成或沒有

我已經嘗試了兩種方法，但都失敗

嘗試撥打同出孩子的方法使其.. React.Children .map（this.props.children，（child）=> child.doAPICall（）），但這個孩子似乎沒有它的功能avai拉布勒
重寫Render函數動態所以它呈現什麼都沒有，那麼孩子完成後，API調用來交換渲染mthod回

React.Children.map（this.props.children，（項目， I）=>
（React.cloneElement（項目，{ 渲染：（）=>假 }）））這將讓我重寫道具而不是渲染方法

任何意見將被大大地設置爲

來源

2016-07-29 darthShana

你應該做一個條件渲染。我建議採用以下兩種方式之一：

要麼在父組件中。執行必要的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>; 
}

..希望你的想法:)

來源

2016-07-29 04:05:04 John

感謝約翰。我希望避免對每個孩子檢查this.state.data ..但我想它不是最糟糕的重複。 – darthShana

如果DRY是優先級，那麼您可能會對高階組件更聰明。 – John

反應動態覆蓋孩子渲染

回答

相關問題