如何有条件地使用 React Native 元素

Question

我需要根据特定条件使用不同的包装器来渲染屏幕。例如，我遇到需要将内容包装在视图中的情况

      <View>
         <Text> </Text>
         <View> </View>
         { and other elements here }
      </View>

但在另一种情况下，我需要视图是来自 nativeBase 的内容。如果 useContent 变量为 true，则使用 Content 作为包装器呈现所有内容，否则使用 View。我该如何最好地做到这一点？

Answer 1

使用三元运算符帮助您有条件地呈现。

render() {
  const useContent = true;
  return useContent ? (
    <Content>
      <Text></Text>
      <View></View>
    </Content>
  ) : (
    <View>
      <Text></Text>
      <View></View>
    </View>
  )
}

将这两个部分提取到它们自己的组件中可能更好。这样您的组件文件就不会变得太大，并且可维护性开始成为一个问题。编辑：如果要使组件的子项保持不变，并且仅更改要更改的包装元素，请创建呈现子项的第二个组件：

class WrappingElement extends Component {
  render() {
    const { children, useContent } = this.props;
    return useContent ? (
      <Content>{children}</Content>
    ) : (
      <View>{children}</View>
    )
  }
}
class Foo extends Component {
  render() {
    <WrappingElement useContent={false}>
      <Text>Hello World!</Text>
      <View></View>
    </WrappingElement>
  }
}

Answer 2

<View>
     booleanCondition1() && <Text> </Text>
     booleanCondition2() && <View> </View>
     booleanConditionN() && { and other elements here }
</View>

Answer 3

<View>
  {condition == true ?
    (
      <Text> </Text>
      <View> </View>
    )
    :
    (
      { and other elements here }
    )
  }
</View>