时间戳

首页 > 解决方案 > 如何在 React Native 中动态渲染元素包装器

react-native - 如何在 React Native 中动态渲染元素包装器

问题描述

假设我有太多的包装组件 A、B、C .....

有时我想渲染

    <A>
      <Text>{this.state.myText}</Text>
   </A>

还有一些时候我想渲染

   <B>
      <Text>{this.state.myText}</Text>
   </B>

……

……

……

如何实现这样的目标？

{this.bringTheRightComponentTag(this.state.wrapperComponent)}
          <Text>{this.state.myText}</Text>
{this.bringTheRightComponentClosingTag(this.state.wrapperComponent)}

这是一个最小化的例子。我只需要学习逻辑。

标签： react-native

解决方案

React 实际上允许您在运行时将组件分配给变量（此处的文档）。所以你可以做类似的事情，

  const SelectedComponent = true ? A : B

  return (
    <SelectedComponent>
      {this.state.myText}
    </SelectedComponent>
  )

推荐阅读