M

MLOG

Français

Un guide complet des React Portails, couvrant leurs cas d'utilisation, leur implémentation, leurs avantages et les meilleures pratiques pour le rendu de contenu en dehors de la hiérarchie standard des composants.

React Portails : Rendu de contenu en dehors de l'arborescence des composants

Les React portails fournissent un mécanisme puissant pour rendre les composants enfants dans un nœud DOM qui existe en dehors de la hiérarchie DOM du composant parent. Cette technique est précieuse dans divers scénarios, tels que les modales, les info-bulles et les situations où vous avez besoin d'un contrôle précis sur le positionnement et l'ordre d'empilement des éléments sur la page.

Que sont les React Portails ?

Dans une application React typique, les composants sont rendus dans une structure hiérarchique stricte. Le composant parent contient des composants enfants, et ainsi de suite. Cependant, vous devez parfois vous libérer de cette structure. C'est là que les React portails entrent en jeu. Un portail vous permet de rendre le contenu d'un composant dans une partie différente du DOM, même si cette partie n'est pas un descendant direct du composant dans l'arborescence React.

Imaginez que vous avez un composant modal qui doit être affiché au niveau supérieur de votre application, quel que soit l'endroit où il est rendu dans l'arborescence des composants. Sans les portails, vous pourriez essayer d'y parvenir en utilisant un positionnement absolu et un z-index, ce qui peut entraîner des problèmes de style complexes et des conflits potentiels. Avec les portails, vous pouvez directement rendre le contenu de la modale dans un nœud DOM spécifique, tel qu'un élément "modal-root" dédié, en vous assurant qu'il est toujours rendu au niveau correct.

Pourquoi utiliser les React Portails ?

Les React Portails répondent à plusieurs défis courants dans le développement web :

Comment implémenter les React Portails

L'utilisation des React Portails est simple. Voici un guide étape par étape :

  1. Créer un nœud DOM : Tout d'abord, créez un nœud DOM où vous souhaitez rendre le contenu du portail. Cela se fait généralement dans votre fichier `index.html`. Par exemple : 
    <div id="modal-root"></div>
  2. Utiliser `ReactDOM.createPortal()` : Dans votre composant React, utilisez la méthode `ReactDOM.createPortal()` pour rendre le contenu dans le nœud DOM créé. Cette méthode prend deux arguments : le nœud React (le contenu que vous souhaitez rendre) et le nœud DOM où vous souhaitez le rendre. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Ce contenu est rendu dans le modal-root !</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Rendre le composant : Rendez le composant contenant le portail comme vous le feriez pour tout autre composant React. 
    function App() {
  return (
    <div>
      <h1>Mon App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Dans cet exemple, le contenu de `MyComponent` sera rendu à l'intérieur de l'élément `modal-root`, même si `MyComponent` est rendu à l'intérieur du composant `App`.

Exemple : Création d'un composant modal avec les React Portails

Créons un composant modal complet en utilisant les React Portails. Cet exemple comprend un style et une fonctionnalité de base pour ouvrir et fermer la modale.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Fermer</button>
      </div>
    </div>,
    modalRoot
  );
}

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

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Mon App</h1>
      <button onClick={handleOpenModal}>Ouvrir la modale</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Contenu de la modale</h2>
          <p>Ceci est le contenu de la modale.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Dans cet exemple :

Vous devrez également ajouter un style CSS aux classes `modal-overlay` et `modal` pour positionner correctement la modale à l'écran. Par exemple :

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

Gestion des événements avec les portails

Une considération importante lors de l'utilisation des portails est la façon dont les événements sont gérés. La propagation d'événements fonctionne différemment avec les portails qu'avec les composants React standard.

Lorsqu'un événement se produit dans un portail, il se propage dans l'arborescence DOM comme d'habitude. Cependant, le système d'événements React traite le portail comme un nœud React régulier, ce qui signifie que les événements se propageront également dans l'arborescence des composants React qui contient le portail.

Cela peut parfois conduire à un comportement inattendu si vous n'êtes pas prudent. Par exemple, si vous avez un gestionnaire d'événements sur un composant parent qui ne devrait être déclenché que par des événements dans ce composant, il pourrait également être déclenché par des événements dans le portail.

Pour éviter ces problèmes, vous pouvez utiliser la méthode `stopPropagation()` sur l'objet événement pour empêcher l'événement de se propager davantage. Alternativement, vous pouvez utiliser les événements synthétiques de React et le rendu conditionnel pour contrôler le moment où les gestionnaires d'événements sont déclenchés.

Voici un exemple d'utilisation de `stopPropagation()` pour empêcher un événement de se propager au composant parent :

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Clické à l'intérieur du portail !');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Ce contenu est rendu dans le portail.</div>,
    document.getElementById('portal-root')
  );
}

Dans cet exemple, cliquer sur le contenu à l'intérieur du portail déclenchera la fonction `handleClick`, mais l'événement ne se propagera à aucun composant parent.

Meilleures pratiques pour l'utilisation des React Portails

Voici quelques bonnes pratiques à garder à l'esprit lorsque vous travaillez avec React Portails :

Alternatives aux React Portails

Bien que les React Portails soient un outil puissant, il existe d'autres approches que vous pouvez utiliser pour obtenir des résultats similaires. Voici quelques alternatives courantes :

Le choix de l'approche à utiliser dépend des exigences spécifiques de votre application et de la complexité des éléments d'interface utilisateur que vous essayez de créer. Les portails sont généralement la meilleure option lorsque vous avez besoin d'un contrôle précis sur le positionnement et l'ordre d'empilement des éléments et que vous souhaitez éviter les conflits CSS.

Considérations globales

Lors du développement d'applications pour un public mondial, il est essentiel de prendre en compte des facteurs tels que la localisation, l'accessibilité et les différences culturelles. Les React Portails peuvent jouer un rôle dans la prise en compte de ces considérations :

En tenant compte de ces considérations globales, vous pouvez créer des applications plus inclusives et conviviales pour un public diversifié.

Conclusion

Les React Portails sont un outil puissant et polyvalent pour le rendu de contenu en dehors de l'arborescence des composants standard. Ils offrent une solution propre et élégante pour les modèles d'interface utilisateur courants tels que les modales, les info-bulles et les popovers. En comprenant comment fonctionnent les portails et en suivant les meilleures pratiques, vous pouvez créer des applications React plus flexibles, plus faciles à maintenir et plus accessibles.

Expérimentez avec les portails dans vos propres projets et découvrez les nombreuses façons dont ils peuvent simplifier votre flux de travail de développement d'interface utilisateur. N'oubliez pas de prendre en compte la gestion des événements, l'accessibilité et les considérations globales lors de l'utilisation des portails dans les applications de production.

En maîtrisant les React Portails, vous pouvez faire passer vos compétences React au niveau supérieur et créer des applications web plus sophistiquées et conviviales pour un public mondial.