Les portails dans React — Formation Apprendre React

Les portails sont un moyen de “téléporter” un élément dans un endroit spécifique du DOM plutôt que comme un enfant de notre élément courant. Ils sont très intéressants pour les boîtes modales ou les systèmes de notification qui doivent souvent se retrouver au premier niveau de la structure d’une page.

Pour créer un portail , il suffit d’utiliser la méthode createPortal()en lui spécifiant l’élément cible en second paramètre.

import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>Cet enfant est placé dans la div parente.</p>
      {createPortal(
        <p>Cet enfant est placé dans le corps du document.</p>,
        document.body
      )}
    </div>
  );
}