14. diel - Portály v React
V predchádzajúcej lekcii, {PREVIOUS }, sme sa naučili používať používať správu stavov pomocou knižnice Redux.
V nasledujúcom tutoriále pokročilého Reactu sa
zoznámime s portálmi. Ukážeme si, ako portál v Reactu
vytvoriť a využiť na tvorbu modálneho okna. Využijeme na
to funkciu createPortal() a našu aplikáciu s Pandou.
Čo to je portál
Portál je v Reactu mocným nástrojom. Umožňuje nám renderovať komponenty do inej časti DOM, ktorá je mimo strom komponentov aplikácie. To je užitočné napríklad na vytváranie modálnych okien, tooltipov alebo iných overlay prvkov.
Tvorba portálu cez
createPortal()
Jednoduchú tvorbu portálu umožňuje funkcia createPortal(),
ktorá je súčasťou knižnice ReactDOM.
Aby sme mohli portál vytvoriť, najprv musíme mať v DOM pripravený
cieľový kontajner, kam chceme komponent vykresliť. Napríklad prázdny
element div, ktorý vytvoríme niekde v HTML dokumente.
Funkcia createPortal() má potom dva argumenty:
- prvým je komponent, ktorý chceme vykresliť do portálového kontajnera,
- druhým potom odkaz na HTML element (alebo selektor), kam chceme komponent vykresliť.
createPortal() vezme komponent, ktorý sme jej odovzdali
ako prvý argument. Vykreslí ju do cieľového kontajnera, ktorý sme jej
odovzdali ako druhý argument. Tento komponent potom bude zobrazený v mieste,
kde je cieľový kontajner v DOM strome.
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Kúpiť tento kurz
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.
- Neobmedzený a trvalý prístup k jednotlivým lekciím.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále pokročilého Reactu si vysvetlíme, ako fungujú portály. Na príklade vytvorenia modalového okna si ukážeme funkciu createPortal() .
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
