React Portals: extindeți-vă cutia de instrumente dincolo de găurirea cu suport

Recomandări cheie

• Portalurile React vă permit să redați conținutul unei componente în afara ierarhiei componentelor părinte, făcându-l util pentru elementele UI, cum ar fi modale și suprapuneri.
• Portalurile pot fi utilizate în diferite scenarii, cum ar fi modal, integrări terță parte, meniuri contextuale și sfaturi cu instrumente, permițând randarea flexibilă în diferite locații DOM.
• Folosind React Portals, puteți separa preocupările privind UI de arborele principal de componente, puteți îmbunătăți mentenabilitatea codului și puteți controla cu ușurință indexul z al componentelor pentru stratificarea și stivuirea elementelor UI.

Aplicațiile web moderne au nevoie de interfețe care să prezinte elemente precum modal și sfaturi pentru instrumente. Dar aceste componente UI s-ar putea să nu se integreze întotdeauna bine cu structura componentelor existente.

React oferă o soluție la această problemă printr-o caracteristică numită Portaluri.

Ce sunt portalurile React?

Portalurile React oferă o modalitate de a reda conținutul unei componente în afara ierarhiei componentei părinte. Cu alte cuvinte, vă permit să redați rezultatul unei componente într-un alt element DOM care nu este un copil al componentei curente.

Această caracteristică este utilă atunci când aveți de-a face cu componentele UI care trebuie să fie randate la un nivel superior în DOM, cum ar fi modale sau suprapuneri.

Utilizări pentru React Portals

Portalurile React sunt utile în diferite scenarii:

• Modale și suprapuneri. Când trebuie să afișați dialoguri modale sau suprapuneri, redați-le la nivelul superior al DOM. Acest lucru asigură că stilurile sau aspectul părinților lor nu le limitează.
• Integrari terte parti. Când se integrează biblioteci terțe care anticipează randarea în anumite locații DOM.
• Meniuri contextuale. Crearea de meniuri contextuale care răspund la interacțiunile utilizatorului, pe care trebuie să le poziționați în raport cu fereastra sau un anumit element DOM.
• Sfaturi de instrumente și popovers. Când redați sfaturi cu instrumente sau popover-uri care trebuie să apară deasupra altor componente, indiferent de poziția acestora în arborele componente.

Cum funcționează portalurile React

În mod tradițional, atunci când randați o componentă în React, atașați ieșirea acesteia la nodul DOM al componentei părinte. Acest lucru funcționează bine pentru majoritatea scenariilor, dar devine limitativ atunci când trebuie să redați conținut în afara ierarhiei părintelui.

Să presupunem că creezi un dialog modal. În mod implicit, veți plasa conținutul modalului în nodul DOM al componentei părinte.

Acest lucru poate duce la conflicte de stil și alte comportamente neintenționate, deoarece conținutul modalului moștenește stilurile și constrângerile componentelor sale părinte.

React Portals abordează această limitare permițându-vă să specificați un element DOM țintă în care ar trebui să fie randată rezultatul unei componente.

Aceasta înseamnă că puteți reda orice element UI în afara ierarhiei DOM a părintelui, eliberându-vă de constrângerile stilurilor și aspectului părintelui.

Cum să utilizați portalurile React

Modalurile sunt un exemplu perfect de când ați putea folosi React Portals. Acest exemplu de cod explică procedura.

Configurați o aplicație React de bază

Înainte de a crea un portal, asigurați-vă că aveți o aplicație React de bază configurată. Poți să folosești instrumente precum Crearea aplicației React pentru a schela rapid un proiect.

Creați un portal pentru modali

Pentru a crea un portal, utilizați ReactDOM.createPortal() funcţie. Este nevoie de două argumente: conținutul pe care doriți să îl randați și o referință la nodul DOM în care să îl redați.

În acest exemplu, componenta Modal își redă copiii folosind un portal. Conținutul va apărea în elementul DOM cu ID-ul „rădăcină”.

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

Puteți defini conținutul unui mod specific într-o anumită componentă. De exemplu, această componentă ModalContent conține un paragraf și a Închide buton:

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

exportdefault ModalContent;

Apoi puteți deschide Modal printr-un clic pe buton definit în 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;

În acest exemplu, componenta Modal își redă conținutul folosind un portal, detașat din ierarhia componentelor principale.

Exemple din lumea reală

Portalurile React sunt utile în diverse situații de zi cu zi.

• Sistem de notificare: Când crearea unui sistem de notificare, deseori doriți mesaje în partea de sus a ecranului, indiferent unde se află componenta curentă.
• Meniul contextual: meniurile contextuale ar trebui să apară aproape de locul în care face clic pe utilizator, indiferent de locul în care se află în ierarhia DOM.
• Integrare terță parte: bibliotecile terțe trebuie adesea să vizeze părți arbitrare ale DOM.

Cele mai bune practici pentru utilizarea portalului

Pentru a profita la maximum de React Portals, urmați aceste sfaturi:

• Selectați cazurile potrivite: Portalurile sunt flexibile, dar nu totul are nevoie de ele. Utilizați portaluri atunci când randarea regulată provoacă probleme sau ciocniri.
• Păstrați conținutul portalului separat: atunci când redați conținut prin portaluri, asigurați-vă că este autonom. Nu ar trebui să se bazeze pe stilurile parentale sau pe context.
• Gestionați evenimente și acțiuni: cu portaluri, evenimentele funcționează puțin diferit din cauza conținutului detașat. Gestionați corect propagarea evenimentelor și acțiunile.

Beneficiile portalurilor React

Portalurile React oferă mai multe beneficii care pot îmbunătăți dezvoltarea interfețelor de utilizator complexe. Ei:

• Ajută la separarea problemelor privind interfața de utilizare de arborele de componente principal, îmbunătățind menținerea și lizibilitatea codului.
• Oferiți flexibilitate componentelor care trebuie să fie afișate în afara componentei lor părinte.
• Ușurează crearea modalelor și suprapunerilor care sunt separate de restul interfeței de utilizare.
• Vă permite să controlați cu ușurință indexul z al componentelor, asigurându-vă că vă puteți stratifica și stivui bine elementele UI.

Capcane și considerații potențiale

Deși portalurile React sunt utile, țineți cont de aceste lucruri:

• Probleme CSS: portalurile pot provoca un comportament neașteptat în stil CSS, deoarece pun conținut în afara componentelor părinte. Utilizați stiluri globale sau gestionați cu atenție domeniul CSS.
• Accesibilitate: atunci când utilizați portaluri pentru a reda conținut, nu uitați să păstrați intacte funcțiile de accesibilitate, cum ar fi navigarea cu tastatura și compatibilitatea cititorului de ecran.
• Redare pe partea serverului: Portalurile s-ar putea să nu se potrivească bine cu randare pe server (SSR). Înțelegeți efectele și limitările utilizării portalurilor în setările SSR.

Propulsarea interfeței de utilizare dincolo de normă

Portalurile React oferă o soluție puternică pentru gestionarea situațiilor complicate de UI care necesită conținut să apară dincolo de limitele componentelor părinte.

Prin înțelegerea portalurilor și folosind cele mai bune practici, puteți construi interfețe de utilizator care sunt mai adaptabile și mai ușor de întreținut, toate evitând problemele.

Indiferent dacă creați modal sau introduceți biblioteci terță parte, React Portals oferă un răspuns puternic pentru a răspunde nevoilor exigente de UI.