Portails React: élargissez votre boîte à outils au-delà du forage d'accessoires

Points clés à retenir

• Les portails React vous permettent de restituer le contenu d'un composant en dehors de sa hiérarchie de composants parent, ce qui le rend utile pour les éléments de l'interface utilisateur tels que les modaux et les superpositions.
• Les portails peuvent être utilisés dans divers scénarios tels que les modaux, les intégrations tierces, les menus contextuels et les info-bulles, permettant un rendu flexible à différents emplacements DOM.
• En utilisant les portails React, vous pouvez séparer les problèmes d'interface utilisateur de l'arborescence principale des composants, améliorer la maintenabilité du code et contrôler facilement l'index z des composants pour superposer et empiler les éléments de l'interface utilisateur.

Les applications Web modernes ont besoin d'interfaces comportant des éléments tels que des modaux et des info-bulles. Mais ces composants d’interface utilisateur ne s’intègrent pas toujours bien à la structure des composants existante.

React propose une solution à ce problème grâce à une fonctionnalité appelée Portals.

Que sont les portails React?

Les portails React offrent un moyen de restituer le contenu d'un composant en dehors de sa hiérarchie de composants parent. En d'autres termes, ils vous permettent de restituer la sortie d'un composant dans un élément DOM différent qui n'est pas un enfant du composant actuel.

Cette fonctionnalité est pratique lorsqu'il s'agit de composants d'interface utilisateur qui doivent être restitués à un niveau supérieur dans le DOM, tels que les modaux ou les superpositions.

Utilisations des portails React

Les portails React sont utiles dans divers scénarios :

• Modaux et superpositions. Lorsque vous devez afficher des dialogues modaux ou des superpositions, restituez-les au niveau supérieur du DOM. Cela garantit que les styles ou la mise en page de leurs parents ne les limitent pas.
• Intégrations tierces. Lors de l'intégration de bibliothèques tierces qui prévoient le rendu à des emplacements DOM spécifiques.
• Menus contextuels. Création de menus contextuels qui répondent aux interactions de l'utilisateur, que vous devez positionner par rapport à la fenêtre ou à un élément DOM spécifique.
• Info-bulles et popovers. Lors du rendu d'info-bulles ou de popovers qui doivent apparaître au-dessus d'autres composants, quelle que soit leur position dans l'arborescence des composants.

Comment fonctionnent les portails React

Traditionnellement, lorsque vous restituez un composant dans React, vous attachez sa sortie au nœud DOM du composant parent. Cela fonctionne bien pour la plupart des scénarios, mais cela devient limitant lorsque vous devez restituer du contenu en dehors de la hiérarchie parent.

Supposons que vous créez un dialogue modal. Par défaut, vous placerez le contenu du modal dans le nœud DOM du composant parent.

Cela peut conduire à des conflits de style et à d'autres comportements involontaires puisque le contenu du modal hérite des styles et des contraintes de ses composants parents.

Les portails React résolvent cette limitation en vous permettant de spécifier un élément DOM cible où la sortie d'un composant doit être restituée.

Cela signifie que vous pouvez restituer n'importe quel élément d'interface utilisateur en dehors de la hiérarchie DOM du parent, en vous libérant des contraintes des styles et de la mise en page du parent.

Comment utiliser les portails React

Les modaux sont un parfait exemple de cas où vous pouvez utiliser les portails React. Cet exemple de code explique la procédure.

Configurer une application React de base

Avant de créer un portail, assurez-vous d'avoir configuré une application React de base. Vous pouvez utiliser des outils comme Create React App pour échafauder rapidement un projet.

Créer un portail pour les modaux

Pour créer un portail, utilisez le ReactDOM.createPortal() fonction. Il faut deux arguments: le contenu que vous souhaitez restituer et une référence au nœud DOM dans lequel le restituer.

Dans cet exemple, le composant Modal restitue ses enfants à l'aide d'un portail. Le contenu apparaîtra dans l’élément DOM avec l’ID « racine ».

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Vous pouvez définir le contenu d'un modal spécifique dans un composant spécifique. Par exemple, ce composant ModalContent contient un paragraphe et un Fermer bouton:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>
Close</button>
 </div>
 </div>
);

exportdefault ModalContent;

Vous pouvez ensuite ouvrir le Modal via un clic de bouton défini dans App.js :

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };
return (



Open Modal</button>
 {isModalOpen && (


 </Modal>
 )}
 </div>
 );
};
exportdefault App;

Dans cet exemple, le composant Modal restitue son contenu à l'aide d'un portail, détaché de la hiérarchie des composants principaux.

Exemples concrets

Les portails React sont utiles dans diverses situations quotidiennes.

• Système de notification: Quand créer un système de notification, vous souhaitez souvent que les messages apparaissent en haut de l'écran, quel que soit l'emplacement du composant actuel.
• Menu contextuel: les menus contextuels doivent apparaître à proximité de l'endroit où l'utilisateur clique, quel que soit son emplacement dans la hiérarchie DOM.
• Intégration tierce: les bibliothèques tierces doivent souvent cibler des parties arbitraires du DOM.

Meilleures pratiques pour l'utilisation du portail

Pour tirer le meilleur parti des portails React, suivez ces conseils :

• Sélectionnez les bons cas: les portails sont flexibles, mais tout n’en a pas besoin. Utilisez des portails lorsque le rendu régulier provoque des problèmes ou des conflits.
• Séparez le contenu du portail: lorsque vous affichez du contenu via des portails, assurez-vous qu'il est autonome. Cela ne devrait pas dépendre des styles ou du contexte des parents.
• Gérer les événements et les actions: avec les portails, les événements fonctionnent un peu différemment en raison du contenu détaché. Gérez correctement la propagation des événements et les actions.

Avantages des portails React

Les portails React offrent plusieurs avantages qui peuvent améliorer le développement d'interfaces utilisateur complexes. Ils:

• Aidez à séparer les problèmes d’interface utilisateur de l’arborescence des composants principale, améliorant ainsi la maintenabilité et la lisibilité du code.
• Offrez de la flexibilité aux composants qui doivent s’afficher en dehors de leur composant parent.
• Facilitez la création de modaux et de superpositions distincts du reste de l’interface utilisateur.
• Vous permet de contrôler facilement l'index z des composants, vous assurant ainsi de pouvoir superposer et empiler soigneusement vos éléments d'interface utilisateur.

Pièges potentiels et considérations

Bien que les portails React soient utiles, gardez ces éléments à l’esprit :

• Problèmes CSS: les portails peuvent provoquer un comportement inattendu du style CSS car ils placent le contenu en dehors des composants parents. Utilisez des styles globaux ou gérez soigneusement la portée CSS.
• Accessibilité: lorsque vous utilisez des portails pour afficher du contenu, n'oubliez pas de conserver intactes les fonctionnalités d'accessibilité telles que la navigation au clavier et la compatibilité avec les lecteurs d'écran.
• Rendu côté serveur: les portails peuvent ne pas bien s'intégrer rendu côté serveur (SSR). Comprendre les effets et les limites de l'utilisation des portails dans les configurations SSR.

Propulser l'interface utilisateur au-delà de la norme

Les portails React offrent une solution solide pour gérer les situations d'interface utilisateur complexes qui nécessitent que le contenu apparaisse au-delà des limites des composants parents.

En maîtrisant les portails et en utilisant les meilleures pratiques, vous pouvez créer des interfaces utilisateur plus adaptables et plus faciles à maintenir, tout en évitant les problèmes.

Que vous créiez des modaux ou que vous intégriez des bibliothèques tierces, les portails React fournissent une réponse puissante pour répondre aux besoins exigeants en matière d'interface utilisateur.