在reactjs中處理子組件中的udefined或null

Question

我有一個父組件和一個子組件。說

Parent{ 
    render(){ 
     return(
      <Child1 /> 
      <Child2 list={this.state.value}/> 
     ) 
    } 
} 

現在我的問題是我在我的控制達到CHILD2，props.list總會來空，當我的，我要點擊我的選擇框從Child1那麼國家將得到填充，因此列表的child2。

我面臨的問題是，當控件第一次到達child2時，瀏覽器顯示列表中的控制檯沒有被定義，並且它斷了，我的child1中沒有任何東西被呈現。如何處理這個scenerio？

而且

是沒有辦法，我可以把一些條件上的child2，如果狀態只加載，那麼它應該被渲染的方法嗎？

Answer 1

如果它拋出props.list爲null的錯誤，則需要通過對this.props.list的值進行檢查來處理Child2組件內的這種情況。像這樣：

class Child2 extends React.Component{ 

    render(){ 
     console.log(this.props.list) 
     if(this.props.list) 
      return <div> 
       {this.props.list} 
       /*other code*/ 
      </div> 
     return null; 
    } 

} 

如果Child2包含正確的列表值，那麼只有render完整的組件。

或者，如果你想render的東西，而不是null然後通過一些其他部件替代null部分：

class Child2 extends React.Component{ 

    render(){ 
     console.log(this.props.list) 
     if(this.props.list) 
      return <div> 
       {this.props.list} 
       /*other code*/ 
      </div> 
     return <div>No content</div> 
    } 

}