Comment implémenter le rendu conditionnel dans ReactJS sans instructions if-else ?

Rendu conditionnel avec des instructions if-else dans ReactJS

Le rendu conditionnel joue un rôle crucial dans ReactJS lorsque vous devez afficher dynamiquement différents contenus en fonction de conditions spécifiques. Cependant, contrairement aux langages de programmation standard, vous ne pouvez pas utiliser les instructions if-else directement dans JSX.

Syntaxe JSX

Selon la documentation React, les instructions if-else ne sont pas prises en charge dans JSX car elles sont sucre syntaxique pour les appels de fonctions et la construction d'objets. Cela signifie que les expressions JSX sont traduites en appels de fonction JavaScript et évaluées en objets JavaScript.

Alternatives de rendu conditionnel

Pour restituer des éléments de manière conditionnelle, il existe deux options principales :

1. Opérateur ternaire :

   L'opérateur ternaire vous permet de conditionnellement rendre les éléments en utilisant la syntaxe suivante :

   {condition ? <Element1 /> : <Element2 />}

   Copier après la connexion

   Par exemple :

   render() {
       return (
           <View>

   Copier après la connexion

2. Appel de fonction avec logique conditionnelle :

   Vous pouvez définir une fonction distincte qui contient la logique conditionnelle et l'appeler de l'intérieur JSX :

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

   Copier après la connexion

Résumé

En comprenant ces alternatives, vous pouvez efficacement restituer le contenu de manière conditionnelle dans ReactJS même si les instructions if-else ne peuvent pas être utilisées directement dans JSX.

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!