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

在render（）中渲染单独的组件

1 个答案: