在 render() 中渲染单独的组件

Posted 2023-02-22

【中文标题】在 render() 中渲染单独的组件

【英文标题】：Rendering separate components in render()

【发布时间】：2017-10-14 11:42:34

【问题描述】：

我正在尝试以自上而下的方式在屏幕上呈现组件。

代码：

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 语句中的内容。

【参考方案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>)
    

【讨论】：

检查更新的答案，当您调用该函数时，它将呈现返回的元素并使用条件来呈现附加元素，或者您可以使用相同的模式调用函数并将条件放入其中并返回元素。

我们通过将 div 更改为 View 来修复它，因为我不在网络上，我在移动应用程序上