0Pricing
React Academy · Leçon

Que sont les portails React ?

Comprendre l’API createPortal et l’intérêt d’effectuer le rendu en dehors de la div racine.

Que sont les portails React ? est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous apprendrez ce que sont les portails React, pourquoi il est utile d'effectuer un rendu en dehors de l'arbre DOM parent et comment utiliser l'API createPortal.

La hiérarchie DOM normale de React

Par défaut, chaque composant est rendu dans le nœud DOM de son parent. Toute l'application React se trouve généralement dans un seul `
`. Cela fonctionne bien jusqu'à ce que vous ayez besoin qu'une fenêtre modale, une infobulle ou un menu déroulant échappe à un parent avec `overflow: hidden`.

Qu'est-ce qu'un portail ?

Un **Portal** vous permet de rendre la sortie d'un composant dans un autre nœud DOM, situé en dehors de la racine React. L'arbre React du composant reste inchangé ; seule la position dans le DOM change.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Pourquoi les portails existent

Des propriétés CSS comme `overflow: hidden`, les contextes d'empilement de `z-index` et `transform` appliqué à un parent peuvent tronquer ou masquer les éléments enfants. Les portails échappent à ces contraintes en attachant la sortie rendue à un autre nœud DOM.

La propagation des événements fonctionne toujours

Même si le nœud DOM du portail se trouve en dehors du parent, **les événements React continuent à se propager** dans l'arbre des composants React, et non dans l'arbre DOM. Un clic à l'intérieur d'une fenêtre modale rendue par un portail se propagera jusqu'à son parent React.

Créer une cible de portail

Vous pouvez utiliser n'importe quel nœud DOM existant comme cible d'un portail. Une pratique courante consiste à ajouter un `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Le cycle de vie du portail est lié à son parent React

Un portail est monté lorsque son composant parent est monté et démonté lorsque le parent est démonté. React continue de le suivre comme une partie du même arbre de composants ; le contexte et les références fonctionnent donc normalement.

Le contexte fonctionne à travers les portails

Puisque les portails restent une partie de l'arbre des composants React, les valeurs de contexte fournies au-dessus du portail restent accessibles à l'intérieur de celui-ci. La position dans le DOM n'a aucun effet sur la chaîne de contexte React.

Utiliser createPortal avec un état

Contrôlez la visibilité du portail avec une variable d'état. Basculez cette valeur à l'aide d'un bouton : le contenu du portail apparaît alors dans document.body tandis que le bouton reste à sa position DOM normale.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Rendu côté serveur et portails

Les portails nécessitent l'existence d'un nœud DOM et sont donc toujours exécutés côté client. Dans Next.js ou dans d'autres configurations SSR, assurez-vous que le code de rendu du portail ne s'exécute que dans le navigateur, en utilisant `useEffect` ou une vérification de l'état indiquant que le composant est monté.

Vérification rapide

Les portails React rendent le contenu dans un autre nœud DOM. Quel aspect de l'arbre des composants React est affecté par cette opération ?

Récapitulatif

Les portails vous permettent de rendre une sortie React dans n'importe quel nœud DOM à l'aide de createPortal(). L'arbre React, le contexte et la propagation des événements restent inchangés. Utilisez-les pour échapper aux contraintes de `overflow` et de `z-index` dans les fenêtres modales et les infobulles.

Ensuite

Prochaine leçon : **Créer un composant de fenêtre modale avec des portails** — vous construirez une fenêtre modale entièrement réutilisable qui sera rendue dans document.body, avec une gestion de son état d'ouverture et de fermeture.

Questions Fréquemment Posées

La leçon « Que sont les portails React ? » est-elle gratuite ?

Oui — le texte complet de « Que sont les portails React ? » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Que sont les portails React ? » ?

Comprendre l’API createPortal et l’intérêt d’effectuer le rendu en dehors de la div racine. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Que sont les portails React ? » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Que sont les portails React ?
  2. Créer un composant modal avec des portails
  3. Gérer le focus et les pièges clavier dans les fenêtres modales
  4. Infobulles et menus déroulants avec des portails
← Retour à React Academy