Rendu Conditionnel en React

Introduction

Dans React, le rendu conditionnel est un concept fondamental qui vous permet d'afficher différents composants ou éléments en fonction de certaines conditions ou de l'état de l'application. C'est essentiel pour construire des interfaces utilisateur dynamiques et réactives. Par exemple, vous pourriez vouloir afficher un bouton "Se connecter" à un invité, mais une page "Profil" à un utilisateur connecté.

Dans ce lab, vous apprendrez plusieurs techniques courantes pour implémenter le rendu conditionnel dans vos applications React. Nous commencerons par une configuration de projet de base et explorerons progressivement différentes méthodes, notamment :

• L'opérateur ternaire (? :) pour une logique simple de type if-else.
• L'opérateur logique && pour n'afficher un élément que lorsqu'une condition est vraie.
• L'utilisation de variables pour stocker des éléments afin d'obtenir un JSX plus propre.
• Le retour de null pour empêcher le rendu d'un composant.
• L'utilisation de l'état de React pour créer des interfaces utilisateur interactives qui modifient ce qui est affiché.

À la fin de ce lab, vous aurez une solide compréhension de la manière de contrôler ce que vos utilisateurs voient en fonction de l'état de votre application.

Utiliser l'opérateur ternaire dans JSX pour la condition

Dans cette étape, vous apprendrez à utiliser l'opérateur conditionnel (ternaire) (? :) pour une logique if-else en ligne directement dans votre JSX. C'est une manière concise de choisir entre deux éléments d'interface utilisateur différents à rendre.

Tout d'abord, naviguons vers le répertoire de notre projet. Toutes les commandes doivent être exécutées à partir de ce répertoire.

cd ~/project/my-app

Ensuite, nous devons installer les dépendances du projet.

npm install

Maintenant, modifions le composant d'application principal. Ouvrez le fichier src/App.jsx dans l'explorateur de fichiers à gauche. Nous allons créer un composant Greeting qui affiche un message différent selon que l'utilisateur est connecté ou non.

Remplacez tout le contenu de src/App.jsx par le code suivant :

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* Try changing isLoggedIn to false to see the other message! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

Dans le composant Greeting, l'expression {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} vérifie la valeur de la prop isLoggedIn. Si elle est true, elle rend "Welcome back!". Sinon, elle rend "Please sign up.".

Maintenant, lançons le serveur de développement pour voir notre composant en action.

npm run dev -- --host 0.0.0.0 --port 8080

Une fois le serveur démarré, ouvrez l'onglet Web 8080 en haut de l'écran. Vous devriez voir le message "Welcome back!". Vous pouvez essayer de changer isLoggedIn={true} en isLoggedIn={false} dans src/App.jsx, enregistrer le fichier, et observer le contenu se mettre à jour automatiquement dans le navigateur.

Appliquer l'opérateur && logique pour le court-circuit

Dans cette étape, nous allons explorer un autre schéma courant pour le rendu conditionnel : l'opérateur logique &&. Ceci est particulièrement utile lorsque vous souhaitez rendre un élément uniquement si une certaine condition est vraie, et ne rien rendre sinon. En JavaScript, true && expression évalue toujours à expression, et false && expression évalue toujours à false. React traite false comme une valeur qui ne rend rien.

Modifions notre fichier src/App.jsx pour démontrer cela. Nous allons ajouter un composant qui affiche un nombre de notifications uniquement s'il y a des messages non lus.

Laissez le serveur de développement en cours d'exécution. Il vous suffit de modifier le fichier et de l'enregistrer pour voir les changements.

Remplacez le contenu de src/App.jsx par le code suivant :

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // Try changing messages to an empty array: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

Dans cet exemple, l'élément <h2> est rendu uniquement parce que unreadMessages.length > 0 est vrai. Si vous changez le tableau messages dans le composant App pour qu'il soit vide (const messages = [];), la condition devient fausse, et l'élément <h2> ne sera pas rendu.

Après avoir enregistré le fichier, vérifiez l'onglet Web 8080. Vous devriez voir le message "You have 3 unread messages.".

Stocker la condition dans une variable et rendre si vrai

Dans cette étape, vous apprendrez à rendre vos composants plus propres en préparant le contenu dans une variable avant l'instruction return. Cette approche est très utile lorsque la logique conditionnelle devient plus complexe que ce qu'un opérateur ternaire ou && peut gérer avec élégance.

En utilisant une variable, vous pouvez utiliser des instructions if JavaScript standard pour décider de ce que le composant doit rendre.

Mettons à jour src/App.jsx pour utiliser cette technique. Nous allons créer un composant qui affiche un bouton "Login" ou "Logout" en fonction d'une prop.

Remplacez le contenu de src/App.jsx par le code suivant :

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

Dans le composant LoginControl, nous déclarons une variable button. Ensuite, une instruction if lui assigne soit <LoginButton />, soit <LogoutButton />. Enfin, le JSX dans l'instruction return inclut simplement {button}. Cela maintient la logique de rendu séparée et rend l'instruction return plus facile à lire.

Enregistrez le fichier et observez les changements dans l'onglet Web 8080. Vous devriez voir le bouton "Login". Essayez de changer isLoggedIn={false} en isLoggedIn={true} pour voir le bouton "Logout" à la place.

Rendre null ou un fragment vide si faux

Dans cette étape, nous allons couvrir un scénario où vous souhaitez empêcher un composant de se rendre du tout. Vous pouvez y parvenir en faisant en sorte que le composant retourne null ou un fragment vide (<></>).

C'est un schéma courant pour les composants qui ne devraient être visibles que dans des conditions spécifiques. Par exemple, une bannière d'avertissement qui ne devrait apparaître que s'il y a un avertissement réel.

Modifions src/App.jsx pour inclure un composant WarningBanner qui ne se rend que lorsqu'une prop warn est true.

Remplacez le contenu de src/App.jsx par le code suivant :

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // Try changing this to false to hide the banner
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

Dans le composant WarningBanner, nous vérifions la prop warn au début. Si elle est false, le composant retourne immédiatement null, et React ne rendra rien pour lui. Si elle est true, il continue à retourner le div d'avertissement.

Après avoir enregistré le fichier, vérifiez l'onglet Web 8080. Vous verrez la bannière d'avertissement jaune. Maintenant, retournez dans src/App.jsx, changez const showWarning = true; en const showWarning = false;, et enregistrez. La bannière disparaîtra de la page.

Basculer l'état pour modifier l'affichage conditionnel

Dans cette dernière étape, nous allons combiner le rendu conditionnel avec l'état de React pour créer un composant interactif. Jusqu'à présent, nos conditions étaient basées sur des props. En utilisant l'état, nous pouvons faire changer la sortie du composant en réponse aux actions de l'utilisateur, comme cliquer sur un bouton.

Nous utiliserons le hook useState pour gérer l'état du composant.

Modifions src/App.jsx pour construire un composant LoginControl qui gère son propre état isLoggedIn et permet à l'utilisateur de le basculer.

Tout d'abord, vous devrez importer useState de React. Remplacez le contenu de src/App.jsx par le code suivant :

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

Voici ce qui se passe :

1. import { useState } from 'react'; importe le hook useState.
2. const [isLoggedIn, setIsLoggedIn] = useState(false); initialise une variable d'état isLoggedIn à false. setIsLoggedIn est la fonction que nous utilisons pour mettre à jour cet état.
3. Nous définissons les fonctions handleLoginClick et handleLogoutClick qui appellent setIsLoggedIn pour mettre à jour l'état.
4. Les LoginButton et LogoutButton reçoivent la fonction de gestion appropriée via leur prop onClick.
5. Le composant Greeting et la variable button dépendent tous deux de l'état isLoggedIn, ils se rendront donc à nouveau chaque fois que l'état changera.

Enregistrez le fichier et allez dans l'onglet Web 8080. Vous verrez le message "Please sign up." et un bouton "Login". Cliquez sur le bouton "Login". L'état sera mis à jour, et l'interface utilisateur changera pour afficher "Welcome back!" et un bouton "Logout".

Résumé

Félicitations pour avoir terminé ce laboratoire sur le rendu conditionnel dans React ! Vous avez appris et pratiqué les techniques les plus courantes pour contrôler ce que votre application affiche en fonction de différentes conditions.

Dans ce laboratoire, vous avez couvert :

• L'utilisation de l'opérateur ternaire (? :) pour une logique simple en ligne if-else.
• L'application de l'opérateur logique && pour rendre un élément uniquement lorsqu'une condition est remplie.
• Le stockage de JSX dans une variable pour gérer une logique plus complexe avec des instructions if, en gardant votre instruction return propre.
• Le retour de null à partir d'un composant pour l'empêcher de rendre quoi que ce soit.
• La combinaison de ces techniques avec le hook useState pour créer des interfaces utilisateur dynamiques et interactives qui répondent aux actions de l'utilisateur.

Ces schémas sont des éléments fondamentaux pour presque toutes les applications React. Les maîtriser vous permettra de créer des expériences riches, réactives et conviviales.