Rendu conditionnel dans React : rendu dynamique des éléments de l'interface utilisateur

Rendu conditionnel dans React : rendu de l'interface utilisateur basé sur des conditions

Le rendu conditionnel dans React fait référence à la technique de rendu de différents éléments de l'interface utilisateur en fonction de certaines conditions ou états. React propose plusieurs façons de restituer conditionnellement des composants ou des éléments en fonction de l'état ou des accessoires de l'application.

1. Qu'est-ce que le rendu conditionnel ?

Le rendu conditionnel est le concept dans lequel différents composants ou éléments sont rendus en fonction de conditions spécifiques. Dans React, cela est généralement réalisé en utilisant des opérateurs JavaScript comme if, ternaire ou && dans JSX pour décider ce qui doit être affiché.

Pourquoi utiliser le rendu conditionnel ?

• Pour afficher différents éléments de l'interface utilisateur en fonction de l'interaction de l'utilisateur ou des changements d'état.
• Pour gérer les cas extrêmes, comme l'affichage des états de chargement, des messages d'erreur ou des états vides.
• Pour basculer dynamiquement entre différentes mises en page ou composants.

2. Techniques de rendu conditionnel de base

a. Utiliser l'instruction if/else

L'approche traditionnelle consistant à utiliser des instructions if ou else peut être utilisée avant de renvoyer JSX. Ceci est particulièrement utile lorsque plusieurs conditions doivent être vérifiées.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b. Utilisation de l'opérateur ternaire

L'opérateur ternaire est un moyen abrégé d'effectuer un rendu conditionnel. C'est utile lorsque vous souhaitez afficher un élément si une condition est vraie et un autre élément si elle est fausse.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c. Utilisation de l'opérateur logique &&

L'opérateur && est un opérateur de court-circuit qui restitue un élément si la condition est vraie. Cette approche est utile lorsque vous avez uniquement besoin de restituer quelque chose de manière conditionnelle sans branche else.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

3. Rendu conditionnel avec fonctions

Vous pouvez également utiliser des fonctions pour gérer plus clairement le rendu conditionnel, en particulier lorsqu'il y a plusieurs conditions à vérifier.

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

4. Rendu conditionnel avec les composants React

Parfois, vous souhaiterez peut-être restituer des composants entiers en fonction d'une certaine condition.

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return isLoggedIn ? <Welcome /> : <Login />;
};

5. Rendu conditionnel basé sur le mappage de tableaux

Si vous effectuez le rendu d'une liste d'éléments, le rendu conditionnel peut être utilisé pour restituer sélectivement certains éléments de la liste.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

6. Rendu conditionnel avec useEffect pour les appels API

Dans de nombreux cas, vous rendrez les éléments de manière conditionnelle en fonction des résultats des appels d'API ou de la récupération de données asynchrone. Cela peut être fait en utilisant l'état et les effets secondaires avec useEffect.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

7. Meilleures pratiques pour le rendu conditionnel

• Restez simple :Évitez les conditions profondément imbriquées qui rendent le JSX difficile à lire et à maintenir.
• Utiliser les fonctions d'assistance : Si vous avez plusieurs conditions, il est souvent plus simple d'utiliser des fonctions d'assistance pour restituer différentes parties de l'interface utilisateur.
• Considérez l'état et les accessoires : Le rendu conditionnel dépend souvent de l'état ou des accessoires du composant. Assurez-vous de gérer les cas extrêmes tels que les états de chargement, les données vides et les erreurs.

8. Conclusion

Le rendu conditionnel est un concept fondamental dans React qui vous permet d'afficher différents éléments de l'interface utilisateur en fonction de l'état ou des accessoires. En utilisant des techniques telles que if, des opérateurs ternaires, des opérateurs && ou même des fonctions, vous pouvez ajuster dynamiquement le rendu de vos composants. Un rendu conditionnel approprié contribue à améliorer l'expérience utilisateur en affichant un contenu approprié en fonction de l'état de l'application ou de l'interaction de l'utilisateur.

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!