Créer des composants React rétractables

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un composant de contenu rétractable en React en utilisant le hook useState. Ce composant permettra aux utilisateurs de basculer la visibilité du contenu en cliquant sur un bouton, ce qui en fera un outil pratique pour organiser et présenter des informations sur une page web. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de créer des composants réutilisables en React qui améliorent l'accessibilité et l'expérience utilisateur de vos applications web.

Contenu rétractable

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Cette fonction affiche un composant rétractable avec un bouton qui bascule la visibilité de son contenu. Voici comment l'utiliser :

1. Utilisez le hook useState() pour créer la variable d'état isCollapsed, qui représente si le contenu est actuellement rétracté ou déplié. Initialisez-la à collapsed.
2. Utilisez l'élément <button> pour basculer l'état isCollapsed et afficher/cacher le contenu passé via la propriété children.
3. Utilisez isCollapsed pour appliquer la classe CSS appropriée au conteneur de contenu, soit collapsed soit expanded, qui détermine son apparence.
4. Mettez à jour l'attribut aria-expanded du conteneur de contenu en fonction de l'état isCollapsed, pour rendre le composant accessible aux utilisateurs handicapés.

Voici le code CSS nécessaire pour ce composant :

.collapse-button {
  display: block;
  width: 100%;
}

.collapse-content.collapsed {
  display: none;
}

.collapse-content.expanded {
  display: block;
}

Et voici le code JavaScript :

const Collapse = ({ collapsed, children }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);

  return (
    <>
      <button
        className="collapse-button"
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? "Afficher" : "Cacher"} le contenu
      </button>
      <div
        className={`collapse-content ${isCollapsed ? "collapsed" : "expanded"}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

Pour utiliser ce composant, appelez-le simplement avec le contenu que vous voulez rétracter :

ReactDOM.createRoot(document.getElementById("root")).render(
  <Collapse>
    <h1>Ceci est un rétractable</h1>
    <p>Bonjour le monde!</p>
  </Collapse>
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le contenu rétractable. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.