Как условно использовать элементы React Native

Question

Мне нужно использовать разные обертки для отображения экрана на основе определенных условий. Например, у меня есть ситуация, когда мне нужно обернуть содержимое в представление

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

Но в другом сценарии мне нужно, чтобы View был Content из nativeBase. если переменная useContent имеет значение true, то визуализируйте все, используя Content в качестве оболочки, иначе используйте View. Как бы я лучше это сделал?

Answer 1

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

Answer 2

Используйте троичный оператор для условной визуализации.

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 3

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