Passer au contenu principal

Utilisation des Portails dans React

Les portails dans React permettent de téléporter des éléments React à des emplacements spécifiques du DOM en dehors de la hiérarchie DOM normale de leur composant parent.

Cette fonctionnalité est particulièrement utile pour des cas d'usage comme les modals ou les notifications, qui doivent souvent être rendus à un niveau différent du DOM pour éviter des problèmes de style ou de z-index.

Problème classique

Imaginons que vous ayez un composant React avec un bouton qui, lorsqu'il est cliqué, affiche une modale :

const App = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Afficher la modale</button>
      {showModal && <Modal />}
    </div>
  );
};

Dans cet exemple, la modale est rendue à l'intérieur du composant parent. Si ce parent est imbriqué profondément dans la hiérarchie du DOM, cela peut entraîner des comportements indésirables en termes de styles ou d'accessibilité.

Introduction aux portails

Les portails permettent de rendre un composant enfant dans un élément DOM qui existe en dehors du nœud DOM de son parent. React fournit la méthode createPortal pour créer ces portails. Cette méthode prend deux arguments :

  1. Le contenu JSX à rendre (par exemple, le contenu de la modale).
  2. L'élément DOM où ce contenu doit être inséré.

Voici comment cela fonctionne dans notre exemple de modale :

import { createPortal } from "react-dom";

const Modal = () => {
  return createPortal(
    <div className="modal">
      <h2>Modale</h2>
      <p>Ceci est une modale téléportée !</p>
    </div>,
    document.body // L'élément DOM cible
  );
};

Ainsi, même si la modale est déclenchée à l'intérieur de votre composant React, elle sera rendue dans le DOM à l'endroit spécifié, en dehors de la hiérarchie de rendu du composant parent.

Retour en haut