在 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 方法 returning 任何东西，只有函数 returning 元素。

2. 您不能 return 来自 render 方法的多个元素，因此您需要将它们包装在 div.

使用这个：

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

          {this.renderSecondComp()}

          {this.renderThirdComp()}

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

另一种可能的方式：

使用变量保存由函数编辑的元素 return 并呈现这些变量，如下所示：

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() 中渲染单独的组件

Rendering separate components in render()

javascript

rendering

render

reactjs

react-native