Portali React: razširite svoj nabor orodij onkraj vrtanja z vrtanjem

Ključni zaključki

• Portali React omogočajo upodobitev vsebine komponente zunaj njene hierarhije nadrejene komponente, zaradi česar je uporabna za elemente uporabniškega vmesnika, kot so modali in prekrivanja.
• Portale je mogoče uporabiti v različnih scenarijih, kot so modali, integracije tretjih oseb, kontekstni meniji in opisi orodij, kar omogoča prilagodljivo upodabljanje na različnih lokacijah DOM.
• Z uporabo portalov React lahko ločite pomisleke uporabniškega vmesnika od glavnega drevesa komponent, izboljšate vzdržljivost kode in enostavno nadzirate z-indeks komponent za plastenje in zlaganje elementov uporabniškega vmesnika.

Sodobne spletne aplikacije potrebujejo vmesnike, ki vsebujejo elemente, kot so modali in orodni nasveti. Toda te komponente uporabniškega vmesnika se morda ne bodo vedno dobro povezale z obstoječo strukturo komponent.

React ponuja rešitev za to težavo s funkcijo, imenovano Portali.

Kaj so portali React?

Portali React ponujajo način za upodabljanje vsebine komponente zunaj njene hierarhije nadrejene komponente. Z drugimi besedami, omogočajo vam upodabljanje izhoda komponente v drug element DOM, ki ni podrejeni element trenutne komponente.

Ta funkcija je priročna pri delu s komponentami uporabniškega vmesnika, ki morajo biti upodobljene na višji ravni v DOM, kot so modali ali prekrivni elementi.

Uporablja se za portale React

Portali React pridejo prav v različnih scenarijih:

• Modali in prekrivanja. Ko morate prikazati modalna dialoga ali prekrivke, jih upodobite na najvišji ravni DOM. To zagotavlja, da jih slogi ali postavitev staršev ne omejujejo.
• Integracije tretjih oseb. Pri integraciji knjižnic tretjih oseb, ki predvidevajo upodabljanje na določenih lokacijah DOM.
• Kontekstni meniji. Ustvarjanje kontekstnih menijev, ki se odzivajo na uporabniške interakcije, ki jih morate postaviti glede na vidno polje ali določen element DOM.
• Namigi orodij in pojavna okna. Pri upodabljanju namigov orodij ali pojavnih elementov, ki se morajo pojaviti na vrhu drugih komponent, ne glede na njihov položaj v drevesu komponent.

Kako delujejo portali React

Običajno, ko upodabljate komponento v Reactu, njen izhod pripnete vozlišču DOM nadrejene komponente. To dobro deluje v večini scenarijev, vendar postane omejujoče, ko morate upodobiti vsebino zunaj nadrejene hierarhije.

Recimo, da ustvarjate modalni dialog. Privzeto boste vsebino modala postavili znotraj vozlišče DOM nadrejene komponente.

To lahko privede do konfliktov slogov in drugega nenamernega vedenja, saj vsebina modala podeduje sloge in omejitve svojih nadrejenih komponent.

Portali React odpravijo to omejitev tako, da vam dovolijo, da določite ciljni element DOM, kjer naj se upodablja izhod komponente.

To pomeni, da lahko upodabljate kateri koli element uporabniškega vmesnika zunaj nadrejene hierarhije DOM, s čimer se osvobodite omejitev nadrejenih slogov in postavitve.

Kako uporabljati portale React

Modali so odličen primer, kako lahko uporabite portale React. Ta vzorčna koda pojasnjuje postopek.

Nastavite osnovno aplikacijo React

Pred ustvarjanjem portala se prepričajte, da imate nastavljeno osnovno aplikacijo React. Lahko uporabiš orodja, kot je Create React App za hitro gradnjo projekta.

Ustvarite portal za modale

Če želite ustvariti portal, uporabite ReactDOM.createPortal() funkcijo. Potrebuje dva argumenta: vsebino, ki jo želite upodobiti, in sklic na vozlišče DOM, v katerem jo želite upodobiti.

V tem primeru komponenta Modal upodablja svoje podrejene elemente s portalom. Vsebina bo prikazana v elementu DOM z ID-jem 'root'.

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

V določeni komponenti lahko definirate vsebino določenega Modala. Na primer, ta komponenta ModalContent vsebuje odstavek in a Zapri gumb:

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

exportdefault ModalContent;

Nato lahko odprete Modal s klikom gumba, definiranega v 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;

V tem primeru Modalna komponenta upodablja svojo vsebino s pomočjo portala, ločenega od hierarhije glavne komponente.

Primeri iz resničnega sveta

Portali React so uporabni v različnih vsakodnevnih situacijah.

• Sistem obveščanja: Kdaj ustvarjanje sistema obveščanja, pogosto želite sporočila na vrhu zaslona, ​​ne glede na to, kje je trenutna komponenta.
• Kontekstni meni: kontekstni meniji se morajo pojaviti blizu mesta, kjer uporabnik klikne, ne glede na to, kje je to v hierarhiji DOM.
• Integracija tretjih oseb: Knjižnice tretjih oseb morajo pogosto ciljati na poljubne dele DOM.

Najboljše prakse za uporabo portala

Če želite kar najbolje izkoristiti portale React, upoštevajte te nasvete:

• Izberite prave primere: Portali so prilagodljivi, vendar jih ne potrebujejo vsi. Uporabite portale, ko redno upodabljanje povzroča težave ali spore.
• Naj bo vsebina portala ločena: Ko upodabljate vsebino prek portalov, se prepričajte, da je samostojna. Ne sme se zanašati na nadrejene sloge ali kontekst.
• Upravljajte dogodke in dejanja: Pri portalih dogodki delujejo nekoliko drugače zaradi ločene vsebine. Pravilno ravnajte s širjenjem dogodkov in dejanji.

Prednosti portalov React

Portali React ponujajo številne prednosti, ki lahko izboljšajo razvoj kompleksnih uporabniških vmesnikov. Oni:

• Pomagajte ločiti pomisleke uporabniškega vmesnika od glavnega drevesa komponent, izboljšajte vzdržljivost in berljivost kode.
• Zagotovite prilagodljivost za komponente, ki morajo biti prikazane zunaj nadrejene komponente.
• Poenostavite ustvarjanje načinov in prekrivk, ki so ločeni od ostalega uporabniškega vmesnika.
• Omogoča vam, da preprosto nadzirate z-indeks komponent, s čimer zagotovite, da lahko svoje elemente uporabniškega vmesnika lepo razporedite po plasteh in skladih.

Morebitne pasti in premisleki

Čeprav so portali React koristni, upoštevajte naslednje:

• Težave s CSS: Portali lahko povzročijo nepričakovano vedenje sloga CSS, saj postavijo vsebino zunaj nadrejenih komponent. Uporabite globalne sloge ali skrbno upravljajte obseg CSS.
• Dostopnost: Ko uporabljate portale za upodabljanje vsebine, ne pozabite ohraniti nedotaknjenih funkcij dostopnosti, kot sta navigacija s tipkovnico in združljivost bralnika zaslona.
• Upodabljanje na strani strežnika: Portali se morda ne bodo dobro povezovali z upodabljanje na strani strežnika (SSR). Razumeti učinke in omejitve uporabe portalov v nastavitvah SSR.

Pogon uporabniškega vmesnika izven norme

Portali React ponujajo močno rešitev za obvladovanje zapletenih situacij uporabniškega vmesnika, ki zahtevajo, da se vsebina prikaže izven meja nadrejenih komponent.

Z razumevanjem portalov in uporabo najboljših praks lahko zgradite uporabniške vmesnike, ki so bolj prilagodljivi in ​​lažji za vzdrževanje, pri tem pa se izognete težavam.

Ne glede na to, ali izdelujete modale ali prinašate knjižnice tretjih oseb, portali React ponujajo močan odgovor za reševanje zahtevnih potreb uporabniškega vmesnika.