Comment rendre un composant en fonction d'une…

Les approches suivantes sont généralement utilisées :

Rendu conditionnel avec opérateur ternaire ou if : La méthode la plus simple.

// Exemple avec opérateur ternaire en React
function MonComposant({ estConnecte }) {
  return (
    <div>
      {estConnecte ? (
        <p>Bonjour, utilisateur !</p>
      ) : (
        <button>Se connecter</button>
      )}
    </div>
  );
}

// Exemple avec if dans un composant fonctionnel
function AutreComposant({ enChargement }) {
  if (enChargement) {
    return <p>Chargement...</p>;
  }
  return <h1>Données chargées !</h1>;
}

Opérateur logique AND (&&) : Utile pour afficher un composant uniquement si la condition est vraie.

// Exemple avec && en React
function Messages({ count }) {
  return (
    <div>
      {count > 0 && <p>Vous avez {count} nouveaux messages.</p>}
    </div>
  );
}

Utilisation de fonctions et composants enfants : Permet d'extraire la logique de rendu dans des fonctions ou composants séparés pour une meilleure lisibilité et réutilisation.

// Exemple avec fonction en React
function renderContenu(roleUtilisateur) {
  if (roleUtilisateur === 'admin') {
    return <PanneauAdmin />;
  } else if (roleUtilisateur === 'utilisateur') {
    return <ProfilUtilisateur />;
  }
  return <PageConnexion />;
}

function App({ roleUtilisateur }) {
  return (
    <div>
      {renderContenu(roleUtilisateur)}
    </div>
  );
}

Tableaux et méthode map : Pour afficher une liste de composants en fonction des données.

// Exemple avec map en React
function ListeItems({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nom}</li>
      ))}
    </ul>
  );
}

CSS display / visibility : Cache ou affiche un élément, mais le composant est toujours rendu. Utile pour des cas simples où l’état n’affecte pas la structure du DOM.

/* Exemple CSS */
.cache {
  display: none;
}

// Exemple d’application de classe CSS en React
function ContenuToggle({ estVisible }) {
  return (
    <div className={estVisible ? '' : 'cache'}>
      <p>Ce contenu est masqué.</p>
    </div>
  );
}

Le choix de la méthode dépend de la complexité de la condition et de la structure du composant. Pour des conditions simples, le ternaire ou && suffisent souvent. Pour des scénarios plus complexes et une meilleure organisation du code, il est recommandé d’utiliser des fonctions ou composants séparés. Faites attention à l’utilisation de CSS display / visibility si vous ne souhaitez pas supprimer complètement l’élément du DOM.

Comment rendre un composant en fonction d'une condition?