React portali: proširite svoju alatnu kutiju izvan okvira bušenja

Ključni zahvati

• React Portali vam omogućuju da prikažete sadržaj komponente izvan hijerarhije nadređene komponente, što ga čini korisnim za UI elemente kao što su modali i preklapanja.
• Portali se mogu koristiti u različitim scenarijima kao što su modali, integracije trećih strana, kontekstni izbornici i opisi alata, omogućujući fleksibilno prikazivanje na različitim DOM lokacijama.
• Korištenjem React Portala možete odvojiti probleme korisničkog sučelja od glavnog stabla komponenti, poboljšati mogućnost održavanja koda i jednostavno kontrolirati z-indeks komponenti za slojevitost i slaganje elemenata korisničkog sučelja.

Moderne web aplikacije trebaju sučelja koja sadrže elemente kao što su modali i alatni opisi. Ali ove komponente korisničkog sučelja možda se neće uvijek dobro integrirati s postojećom strukturom komponenti.

React nudi rješenje za ovaj problem kroz značajku pod nazivom Portali.

Što su React portali?

React Portali pružaju način za renderiranje sadržaja komponente izvan hijerarhije nadređene komponente. Drugim riječima, omogućuju vam da iscrtate izlaz komponente u drugi DOM element koji nije dijete trenutne komponente.

Ova značajka je korisna kada se radi o komponentama korisničkog sučelja koje se trebaju prikazati na višoj razini u DOM-u, kao što su modali ili slojevi.

Koristi se za React portale

React Portali su korisni u raznim scenarijima:

• Modali i preklapanja. Kada trebate prikazati modalne dijaloge ili slojeve, renderirajte ih na najvišoj razini DOM-a. To osigurava da ih stilovi ili izgled roditelja ne ograničavaju.
• Integracije trećih strana. Prilikom integracije biblioteka trećih strana koje predviđaju iscrtavanje na određenim DOM lokacijama.
• Kontekstni izbornici. Stvaranje kontekstnih izbornika koji odgovaraju na interakcije korisnika, koje trebate postaviti u odnosu na okvir za prikaz ili određeni DOM element.
• Opisi i skočni prozori. Prilikom renderiranja opisa alata ili skočnih prozora koji se moraju pojaviti na vrhu drugih komponenti, bez obzira na njihov položaj u stablu komponenti.

Kako funkcioniraju React portali

Tradicionalno, kada renderirate komponentu u Reactu, njen izlaz prilažete DOM čvoru nadređene komponente. Ovo dobro funkcionira u većini scenarija, ali postaje ograničavajuće kada trebate prikazati sadržaj izvan nadređene hijerarhije.

Pretpostavimo da stvarate modalni dijalog. Prema zadanim postavkama sadržaj modala smjestit ćete unutar DOM čvor nadređene komponente.

To može dovesti do sukoba stilova i drugog nenamjernog ponašanja budući da sadržaj modala nasljeđuje stilove i ograničenja svojih nadređenih komponenti.

React Portali rješavaju ovo ograničenje dopuštajući vam da navedete ciljni DOM element gdje bi se trebao prikazati izlaz komponente.

To znači da možete prikazati bilo koji element korisničkog sučelja izvan nadređene DOM hijerarhije, oslobađajući se ograničenja nadređenih stilova i izgleda.

Kako koristiti React portale

Modali su savršen primjer kada možete koristiti React Portale. Ovaj primjer koda objašnjava postupak.

Postavite osnovnu React aplikaciju

Prije izrade portala provjerite imate li postavljenu osnovnu React aplikaciju. Možeš koristiti alate poput Create React App za brzu izradu skele projekta.

Napravite portal za modale

Za izradu portala koristite ReactDOM.createPortal() funkcija. Potrebna su dva argumenta: sadržaj koji želite prikazati i referenca na DOM čvor u kojem se prikazuje.

U ovom primjeru Modalna komponenta prikazuje svoju djecu pomoću portala. Sadržaj će se pojaviti u DOM elementu s ID-om 'root'.

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

Možete definirati sadržaj određenog Modala u određenoj komponenti. Na primjer, ova komponenta ModalContent sadrži odlomak i a Zatvoriti dugme:

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

exportdefault ModalContent;

Zatim možete otvoriti Modal klikom na gumb definiran u 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;

U ovom primjeru, Modalna komponenta prikazuje svoj sadržaj koristeći portal, odvojen od hijerarhije glavne komponente.

Primjeri iz stvarnog svijeta

React Portali su korisni u raznim svakodnevnim situacijama.

• Sustav obavješćivanja: Kada stvaranje sustava obavješćivanja, često želite poruke na vrhu zaslona, ​​bez obzira gdje se trenutačna komponenta nalazi.
• Kontekstni izbornik: Kontekstni izbornici trebali bi iskočiti blizu mjesta gdje korisnik klikne, bez obzira gdje se to nalazi u DOM hijerarhiji.
• Integracija treće strane: biblioteke treće strane često trebaju ciljati proizvoljne dijelove DOM-a.

Najbolje prakse za korištenje portala

Kako biste maksimalno iskoristili React portale, slijedite ove savjete:

• Odaberite prave slučajeve: Portali su fleksibilni, ali ne trebaju sve. Koristite portale kada redovno iscrtavanje uzrokuje probleme ili sukobe.
• Držite sadržaj portala odvojenim: Kada prikazujete sadržaj kroz portale, provjerite je li samostalan. Ne smije se oslanjati na nadređene stilove ili kontekst.
• Upravljanje događajima i radnjama: s portalima događaji funkcioniraju malo drugačije zbog odvojenog sadržaja. Pravilno postupajte s širenjem događaja i radnjama.

Prednosti React portala

React Portali nude nekoliko prednosti koje mogu poboljšati razvoj složenih korisničkih sučelja. Oni:

• Pomozite odvojiti probleme korisničkog sučelja od glavnog stabla komponenti, poboljšavajući mogućnost održavanja i čitljivost koda.
• Omogućite fleksibilnost za komponente koje se trebaju prikazati izvan nadređene komponente.
• Olakšajte stvaranje modala i slojeva koji su odvojeni od ostatka korisničkog sučelja.
• Omogućuju vam jednostavnu kontrolu z-indeksa komponenti, osiguravajući da možete uredno slojeviti i složiti elemente korisničkog sučelja.

Potencijalne zamke i razmatranja

Iako su React portali korisni, imajte na umu sljedeće:

• Problemi s CSS-om: Portali mogu uzrokovati neočekivano ponašanje stila CSS-a jer postavljaju sadržaj izvan nadređenih komponenti. Koristite globalne stilove ili pažljivo upravljajte opsegom CSS-a.
• Pristupačnost: kada koristite portale za prikaz sadržaja, ne zaboravite zadržati značajke pristupačnosti kao što su navigacija tipkovnicom i kompatibilnost čitača zaslona.
• Iscrtavanje na strani poslužitelja: Portali se možda neće dobro povezati s prikazivanje na strani poslužitelja (SSR). Razumjeti učinke i ograničenja korištenja portala u SSR postavkama.

Promicanje korisničkog sučelja izvan norme

React Portali nude snažno rješenje za rukovanje zamršenim UI situacijama koje zahtijevaju da se sadržaj pojavi izvan granica nadređenih komponenti.

Shvaćanjem portala i korištenjem najboljih praksi, možete izgraditi korisnička sučelja koja su prilagodljivija i lakša za održavanje, izbjegavajući probleme.

Bilo da izrađujete modale ili unosite biblioteke trećih strana, React Portali pružaju snažan odgovor za rješavanje zahtjevnih potreba korisničkog sučelja.