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