2
votes

Comment utiliser conditionnellement les éléments React Native

J'ai besoin d'utiliser différents wrappers pour rendre l'écran en fonction d'une certaine condition. Exemple, j'ai une situation où je dois envelopper le contenu dans une vue

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

Mais dans un scénario différent, j'ai besoin que la vue soit du contenu de nativeBase. si la variable useContent est true, alors restituer tout en utilisant Content comme wrapper, sinon utilisez View. Quelle est la meilleure façon de procéder?

reactjs react-native native-base

0 commentaires

3 Réponses :

0
votes

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

0 commentaires

0
votes

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

0 commentaires

1
votes

Utilisez un opérateur ternaire pour vous aider à effectuer un rendu conditionnel.

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>
  }
}

Il peut également être préférable d'extraire ces deux éléments dans leurs propres composants. Juste pour que votre fichier de composants ne devienne pas trop volumineux et que la maintenabilité commence à être un problème. Modifier: Si vous souhaitez que les enfants du composant restent identiques et que l’élément d’habillage à modifier ne soit pas modifié, créez un deuxième composant qui rend les enfants:

render() {
  const useContent = true;

  return useContent ? (
    <Content>
      <Text></Text>
      <View></View>
    </Content>
  ) : (
    <View>
      <Text></Text>
      <View></View>
    </View>
  )
}

2 commentaires

Je vous remercie. Le contenu entier qui doit aller est trop volumineux et dépend de l'écran, y a-t-il un moyen d'avoir une fonction qui me permettrait d'utiliser le contenu et la vue de manière interchangeable? exemple: const contentorView = () => useContent? : Et utilisez-le à la place. Mais je ne suis pas sûr que cette méthode fonctionnerait.

vous pouvez faire la même chose mais les enfants de la balise peuvent être un seul composant. Je mettrai à jour ma réponse.