render（）で別々のコンポーネントをレンダリングする

Question

画面上にコンポーネントをレンダリングしようとしていますが、トップダウンのような動作があります。

コード：

render() { 
    this.renderFirstComp(); // stuff in the header 
    this.renderSecondComp(); 
    this.renderThirdComp(); 

    if(some condition){ 
     return(<Text> something </Text>) 
    } 
    else { 
     return(<Text> something else </Text>) 
    } 
} 

renderFirstComp() { 
    let tests = ['1', '2', '3', '4', '5']; 

    return(
     <View> 
      <Text> Test #: </Text> 
      <Text>{tests[this.state.selectedTest]} </Text> 
     </View> 
    ) 
} 

renderSecondComp(){ 
    return .....; 
} 

renderThirdComp(){ 
    return .....; 
} 

しかし、このルーチンが動作しない（何もレンダリングされません取得されます）。正しいパターンに従っていますか？

編集： 私は上記のすべてをレンダリングする：FirstComp、秒、第三... と if文の内側のもの。

Answer 1

問題：あなたはrender方法から何かを返されていません

1.は、機能のみの要素を返しています。

2.あなたはrenderメソッドから複数の要素を返すことはできませんので、あなたはdiv内にそれらをラップする必要があります。

使用この：

render() { 
    return(
     <div> 
      {this.renderFirstComp()} 

      {this.renderSecondComp()} 

      {this.renderThirdComp()} 

      { 
      condition ? <Text> something </Text> : <Text> something else </Text>   
      } 
     </div> 
    ) 
} 

もう一つの可能​​な方法：

このように、関数によって返された要素を保存し、それらの変数をレンダリングするために変数を使用します。

render() { 
    let first = this.renderFirstComp(); 
    let second = this.renderSecondComp(); 
    let third = this.renderThirdComp(); 
    let additionalElement = this._renderAdditionalElement() 
    return(
     <div> 
      {first} 
      {second} 
      {third} 
      {additionalElement} 
     </div> 
    ) 
} 

_renderAdditionalElement(){ 
    if(true){ 
     return(<Text> something </Text>) 
    }else{ 
     return(<Text> something else </Text>) 
    } 
}