Comment puis-je implémenter le rendu conditionnel dans React JSX sans utiliser d'instructions if-else ?

Rendu conditionnel avec JSX dans React : Comprendre les instructions if-else

Dans les applications React, la logique de rendu repose souvent sur l'état du composant . Bien qu'il puisse sembler intuitif d'utiliser des instructions if-else dans JSX pour restituer conditionnellement des éléments en fonction des changements d'état, cette approche ne fonctionne pas comme prévu.

Pourquoi les instructions if-else ne fonctionnent pas dans JSX

JSX n'est qu'un sucre syntaxique pour créer des objets JavaScript. Il transforme les expressions JSX en appels de fonction et en construction d'objets lors de la compilation. Cependant, les instructions if-else ne sont pas des expressions mais des instructions.

Opérateur ternaire à la rescousse

Pour restituer des éléments de manière conditionnelle, vous pouvez utiliser l'opérateur ternaire, écrit comme :

{condition ? trueStatement : falseStatement}

Il fournit un moyen concis de choisir dynamiquement entre les éléments de rendu en fonction d'une condition. Par exemple :

render() {
    return (   
        <View>

Dans ce scénario, si this.state.value est égal à « news », l'élément Text sera rendu ; sinon, null sera renvoyé, masquant efficacement l'élément de la vue.

Approche basée sur les fonctions

Une autre approche consiste à créer une fonction qui gère le rendu conditionnel. Placez la logique if-else à l'intérieur de la fonction et appelez-la depuis JSX :

renderElement(){
   if(this.state.value == 'news')
      return data;
   return null;
}

render() {
    return (   
        <View>

Cette méthode élimine le besoin d'instructions if-else dans JSX et maintient une structure de code plus propre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!