Comment transporter vos composants n'importe où avec les portails React

Lorsque nous créons des composants dans React, ils existent normalement dans l'arborescence des composants. C'est généralement bien, mais parfois nous voulons que certaines parties d'un composant apparaissent en , ou quelque part complètement différent. dehors de l'arborescence des composants Il s'agit d'une exigence courante lorsque nous créons des fenêtres contextuelles modales, qui doivent être au-dessus de tous les autres composants. Nous pouvons les créer dans un composant, mais en fin de compte, nous les voulons avant tout, et les avoir imbriqués dans de nombreux composants peut causer des problèmes car leur tombera en dessous de tout ce qu'ils contiennent : z-index Pour résoudre ce problème, nous pouvons le modal hors de son propre composant et dans une autre partie de notre modèle en utilisant . téléporter createPortal Cela nous permet de placer notre composant n'importe où, comme à la base de l'arborescence HTML, à l'intérieur de la balise ou à l'intérieur d'un autre élément. body Même si l'élément existe dans l'arborescence des composants, nous donne le pouvoir de le placer où bon nous semble. createPortal Utiliser les portails React Pour vous montrer comment fonctionnent les portails, considérez que nous avons le code React de base suivant dans notre fichier Ici, nous voulons que le modal apparaisse au-dessus de tout le reste. En tant que tel, nous avons créé une appelée . C'est finalement là que nous voulons que tous nos modaux entrent : App.js div #modal-container import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( Edit src/App.js and save to reload.

setIsModalOpen(!isModalOpen)}> Click to Open Modal setIsModalOpen(!isModalOpen)}> This is Modal Content! ); } export default App; Dans , j'ai importé un composant appelé . Il s'agit de notre composant modal, qui apparaîtra chaque fois que l'utilisateur cliquera sur le bouton. App.js Modal Chaque fois que est défini sur true en utilisant , le modal doit apparaître. Sinon, il disparaîtra. isModalOpen setIsModalOpen() J'ai aussi un peu de CSS pour m'assurer que nos modaux apparaissent bien au-dessus de tout le reste : #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; } Création de notre {ortal Créer un portail est assez simple - il y a une fonction, . Au lieu de renvoyer du DOM dans React, nous renvoyons le à la place. createPortal() Portal accepte deux arguments - l'élément DOM que nous voulons renvoyer - dans ce cas, le modal - et l'élément DOM vers lequel nous voulons téléporter notre élément DOM. createPortal() Donc, notre deuxième argument est , puisque nous voulons mettre tous nos modaux dans : document.getElementById('modal-container') #modal-container import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( Close Modal Modal Content goes here , document.getElementById('modal-container') ) ); }; export default Modal; Bien que nous ayons téléporté notre élément DOM vers , il se comporte toujours comme un enfant React normal. Étant donné que le portail existe toujours dans l'arborescence React, des fonctionnalités telles que le contexte dans lequel se trouve l'élément fonctionnent toujours de la même manière. modal-container Il convient également de noter que bien que nous ayons et dans le même fichier, l'endroit où vous téléportez votre élément DOM peut se trouver dans votre code React. modal-container Modal n'importe où Ainsi, vous pouvez le téléporter vers un sous-composant, un élément ou un parent complètement différent n'importe où dans le DOM. C'est assez puissant et utile - alors utilisez-le judicieusement. Revenons à notre HTML : App.js setIsModalOpen(!isModalOpen)}> Click to Open Modal setIsModalOpen(!isModalOpen)}> This is Modal Content! Maintenant, même si se trouve dans notre en-tête, il apparaîtra dans chaque fois que nous ouvrirons le modal à l'aide du bouton : Modal #modal-container Conclusion Les portails sont un outil assez puissant dans React. Ils sont un moyen utile de résoudre le problème principal des systèmes à base de composants - transporter certains éléments avant tout le reste. En tant que tel, j'espère que vous avez apprécié ce guide des portails React. Si vous apprenez React, je vous suggère de maîtriser d'abord Javascript - ce que vous pouvez faire avec mon complet. manuel Javascript Passe une bonne journée.