在 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、Sec、Third.. 和 if 语句中的内容。

Answer 1

问题：

1.你没有从render方法返回任何东西，只有函数返回元素。

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