Portály React: Rozšírte svoju súpravu nástrojov nad rámec vŕtania podpier

Kľúčové informácie

• Portály React vám umožňujú vykresliť obsah komponentu mimo hierarchiu nadradených komponentov, čo je užitočné pre prvky používateľského rozhrania, ako sú modály a prekrytia.
• Portály možno použiť v rôznych scenároch, ako sú modály, integrácie tretích strán, kontextové ponuky a popisy nástrojov, čo umožňuje flexibilné vykresľovanie na rôznych miestach DOM.
• Pomocou portálov React môžete oddeliť problémy používateľského rozhrania od stromu hlavných komponentov, zlepšiť udržiavateľnosť kódu a jednoducho ovládať z-index komponentov pre vrstvenie a stohovanie prvkov používateľského rozhrania.

Moderné webové aplikácie potrebujú rozhrania, ktoré obsahujú prvky, ako sú modály a popisy. Tieto komponenty používateľského rozhrania sa však nemusia vždy dobre integrovať s existujúcou štruktúrou komponentov.

React ponúka riešenie tohto problému prostredníctvom funkcie s názvom Portály.

Čo sú portály React?

Portály React poskytujú spôsob, ako vykresliť obsah komponentu mimo hierarchiu nadradených komponentov. Inými slovami, umožňujú vám vykresliť výstup komponentu do iného prvku DOM, ktorý nie je potomkom aktuálneho komponentu.

Táto funkcia je užitočná pri práci s komponentmi používateľského rozhrania, ktoré je potrebné vykresliť na vyššej úrovni v DOM, ako sú modály alebo prekrytia.

Používa sa pre portály React

Portály React sa hodia v rôznych scenároch:

• Modály a prekrytia. Ak potrebujete zobraziť modálne dialógy alebo prekrytia, vykreslite ich na najvyššej úrovni modelu DOM. To zaisťuje, že štýly alebo rozloženie rodičov ich neobmedzujú.
• Integrácie tretích strán. Pri integrácii knižníc tretích strán, ktoré predpokladajú vykresľovanie na konkrétnych miestach DOM.
• Kontextové ponuky. Vytváranie kontextových ponúk, ktoré reagujú na interakcie používateľa, ktoré musíte umiestniť relatívne k výrezu alebo konkrétnemu prvku DOM.
• Popisy a kontextové okná. Pri vykresľovaní popisov nástrojov alebo kontextových okien, ktoré sa musia objaviť nad ostatnými komponentmi, bez ohľadu na ich pozíciu v strome komponentov.

Ako fungujú portály React

Tradične, keď vykreslíte komponent v Reacte, pripojíte jeho výstup k uzlu DOM nadradeného komponentu. Funguje to dobre pre väčšinu scenárov, ale stáva sa to limitujúcim, keď potrebujete vykresliť obsah mimo hierarchiu rodiča.

Predpokladajme, že vytvárate modálny dialóg. V predvolenom nastavení umiestnite obsah modálu do uzol DOM nadradeného komponentu.

To môže viesť ku konfliktom štýlu a inému neúmyselnému správaniu, pretože obsah modálu preberá štýly a obmedzenia svojich nadradených komponentov.

Portály React riešia toto obmedzenie tým, že vám umožňujú zadať cieľový prvok DOM, kde by sa mal vykresliť výstup komponentu.

To znamená, že môžete vykresliť akýkoľvek prvok používateľského rozhrania mimo hierarchie DOM rodiča, čím sa oslobodíte od obmedzení štýlov a rozloženia rodiča.

Ako používať portály React

Modály sú dokonalým príkladom toho, kedy môžete použiť portály React. Tento vzorový kód vysvetľuje postup.

Nastavte si základnú aplikáciu React

Pred vytvorením portálu sa uistite, že máte nastavenú základnú aplikáciu React. Môžeš použiť nástroje ako Create React App na rýchle lešenie projektu.

Vytvorte portál pre modály

Na vytvorenie portálu použite ReactDOM.createPortal() funkciu. Vyžaduje dva argumenty: obsah, ktorý chcete vykresliť, a odkaz na uzol DOM na jeho vykreslenie.

V tomto príklade komponent Modal vykresľuje svojich potomkov pomocou portálu. Obsah sa zobrazí v prvku DOM s ID „root“.

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

Môžete definovať obsah konkrétneho Modalu v špecifickom komponente. Napríklad tento komponent ModalContent obsahuje odsek a a Zavrieť tlačidlo:

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

exportdefault ModalContent;

Potom môžete modal otvoriť kliknutím na tlačidlo definované 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 tomto príklade komponent Modal vykresľuje svoj obsah pomocou portálu, ktorý je oddelený od hierarchie hlavného komponentu.

Príklady zo skutočného sveta

Portály React sú užitočné v rôznych každodenných situáciách.

• Systém upozornení: Kedy vytvorenie notifikačného systému, často chcete správy v hornej časti obrazovky, bez ohľadu na to, kde sa aktuálny komponent nachádza.
• Kontextová ponuka: Kontextové ponuky by sa mali zobrazovať blízko miesta, na ktoré používateľ klikne, bez ohľadu na to, kde sa to nachádza v hierarchii modelu DOM.
• Integrácia tretích strán: Knižnice tretích strán sa často potrebujú zamerať na ľubovoľné časti DOM.

Osvedčené postupy používania portálu

Ak chcete z portálov React vyťažiť maximum, postupujte podľa týchto tipov:

• Vyberte si správne puzdrá: Portály sú flexibilné, no nie všetko ich potrebuje. Portály používajte vtedy, keď bežné vykresľovanie spôsobuje problémy alebo kolízie.
• Udržujte obsah portálu oddelený: Keď vykresľujete obsah cez portály, uistite sa, že je samostatný. Nemalo by sa spoliehať na nadradené štýly alebo kontext.
• Spravujte udalosti a akcie: S portálmi fungujú udalosti trochu inak kvôli oddelenému obsahu. Správne zvládajte šírenie udalostí a akcie.

Výhody portálov React

Portály React ponúkajú niekoľko výhod, ktoré môžu zlepšiť vývoj komplexných používateľských rozhraní. Oni:

• Pomôžte oddeliť problémy používateľského rozhrania od stromu hlavných komponentov, čím sa zlepší udržiavateľnosť a čitateľnosť kódu.
• Poskytnite flexibilitu pre komponenty, ktoré sa musia zobraziť mimo svojho nadradeného komponentu.
• Uľahčite vytváranie modálov a prekrytí, ktoré sú oddelené od zvyšku používateľského rozhrania.
• Umožní vám jednoducho ovládať z-index komponentov, čím zaistíte, že budete môcť svoje prvky používateľského rozhrania úhľadne vrstviť a stohovať.

Možné úskalia a úvahy

Hoci sú portály React užitočné, majte na pamäti tieto veci:

• Problémy s CSS: Portály môžu spôsobiť neočakávané správanie štýlu CSS, pretože umiestňujú obsah mimo nadradených komponentov. Používajte globálne štýly alebo starostlivo spravujte rozsah CSS.
• Zjednodušenie ovládania: Keď na vykresľovanie obsahu používate portály, nezabudnite zachovať funkcie zjednodušenia ovládania, ako je navigácia pomocou klávesnice a kompatibilita s čítačkou obrazovky.
• Vykresľovanie na strane servera: Portály sa nemusia dobre prepájať vykresľovanie na strane servera (SSR). Pochopte účinky a obmedzenia používania portálov v nastaveniach SSR.

Propeling UI Beyond the Norm

Portály React ponúkajú silné riešenie na zvládanie zložitých situácií používateľského rozhrania, ktoré potrebujú, aby sa obsah zobrazoval za hranicami nadradených komponentov.

Uchopením portálov a používaním osvedčených postupov môžete vytvárať používateľské rozhrania, ktoré sú prispôsobiteľnejšie a jednoduchšie na údržbu, a to všetko pri predchádzaní problémom.

Či už vytvárate modály alebo prinášate knižnice tretích strán, portály React poskytujú účinnú odpoveď na riešenie náročných potrieb používateľského rozhrania.