React Portálok: Bővítse ki eszköztárát a támasztékfúráson túl

Kulcs elvitelek

• A React Portals lehetővé teszi, hogy egy összetevő tartalmát a szülőkomponens-hierarchián kívül jelenítse meg, ami hasznossá teszi az olyan felhasználói felületi elemekhez, mint a modálisok és a fedvények.
• A portálok különféle forgatókönyvekben használhatók, például modálokban, harmadik féltől származó integrációkban, helyi menükben és eszköztippekben, lehetővé téve a rugalmas megjelenítést a különböző DOM-helyeken.
• A React Portals használatával elválaszthatja a felhasználói felület problémáit a fő összetevőfától, javíthatja a kód karbantarthatóságát, és egyszerűen vezérelheti az összetevők z-indexét az UI-elemek rétegezéséhez és egymásra halmozásához.

A modern webes alkalmazásoknak olyan felületekre van szükségük, amelyek olyan elemeket tartalmaznak, mint a modálisok és az eszköztippek. Előfordulhat azonban, hogy ezek a felhasználói felület-összetevők nem mindig integrálhatók jól a meglévő komponensszerkezettel.

A React megoldást kínál erre a problémára a Portals nevű szolgáltatáson keresztül.

Mik azok a React portálok?

A React Portals módot biztosít az összetevő tartalmának a szülőkomponens-hierarchián kívüli megjelenítésére. Más szavakkal, lehetővé teszik, hogy egy komponens kimenetét egy másik DOM-elembe renderelje, amely nem az aktuális összetevő gyermeke.

Ez a funkció akkor hasznos, ha olyan felhasználói felület-összetevőkkel foglalkozik, amelyeket magasabb szinten kell renderelni a DOM-ban, például a modálisokat vagy az átfedéseket.

React portálok felhasználása

A React Portalok különféle forgatókönyvekben hasznosak:

• Modálok és átfedések. Ha modális párbeszédeket vagy átfedéseket kell megjelenítenie, jelenítse meg azokat a DOM legfelső szintjén. Ez biztosítja, hogy a szülők stílusa vagy elrendezése ne korlátozza őket.
• Harmadik féltől származó integrációk. Harmadik féltől származó könyvtárak integrálásakor, amelyek bizonyos DOM-helyeken várják a megjelenítést.
• Helyi menük. Helyi menük létrehozása, amelyek reagálnak a felhasználói interakciókra, amelyeket a nézetablakhoz vagy egy adott DOM-elemhez képest kell elhelyezni.
• Eszköztippek és előugró ablakok. Eszköztippek vagy előugró ablakok megjelenítésekor, amelyeknek a többi összetevő tetején kell megjelenniük, függetlenül az összetevőfán elfoglalt helyüktől.

Hogyan működnek a React portálok

Hagyományosan, amikor egy komponenst a Reactban renderel, a kimenetét a szülőkomponens DOM-csomópontjához csatolja. Ez a legtöbb forgatókönyvnél jól működik, de korlátozóvá válik, ha a szülő hierarchiáján kívül kell megjeleníteni a tartalmat.

Tegyük fel, hogy modális párbeszédet hoz létre. Alapértelmezés szerint a modális tartalmat a következőn belül helyezi el szülőkomponens DOM-csomópontja.

Ez stíluskonfliktusokhoz és más nem szándékos viselkedéshez vezethet, mivel a modális tartalom örökli szülőkomponenseinek stílusait és megszorításait.

A React Portals úgy kezeli ezt a korlátozást, hogy lehetővé teszi egy cél DOM-elem megadását, ahol az összetevő kimenetének meg kell jelennie.

Ez azt jelenti, hogy a szülő DOM-hierarchiáján kívül bármilyen UI-elemet megjeleníthet, megszabadítva a szülő stílusának és elrendezésének korlátaitól.

A React portálok használata

A modálok tökéletes példák arra, hogy mikor használhatjuk a React Portalokat. Ez a mintakód elmagyarázza az eljárást.

Alapvető React alkalmazás beállítása

Portál létrehozása előtt győződjön meg arról, hogy be van állítva egy alapvető React alkalmazás. Te tudod használni olyan eszközöket, mint a Create React App hogy gyorsan felállványozzon egy projektet.

Hozzon létre egy portált a modálokhoz

Portál létrehozásához használja a ReactDOM.createPortal() funkció. Két argumentumra van szükség: a megjeleníteni kívánt tartalomra és a DOM-csomópontra való hivatkozásra a megjelenítéshez.

Ebben a példában a Modal összetevő egy portál használatával jeleníti meg gyermekeit. A tartalom a DOM elemben „root” azonosítóval jelenik meg.

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

Meghatározhatja egy adott Modal tartalmát egy adott komponensben. Például ez a ModalContent komponens tartalmaz egy bekezdést és a Bezárás gomb:

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

exportdefault ModalContent;

Ezután megnyithatja a Modalt az App.js-ben meghatározott gombkattintással:

// 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;

Ebben a példában a Modal komponens egy portál használatával jeleníti meg a tartalmát, elválasztva a fő összetevő hierarchiától.

Valós példák

A React portálok különféle mindennapi helyzetekben hasznosak.

• Értesítési rendszer: Mikor értesítési rendszer létrehozása, gyakran azt szeretné, hogy az üzenetek a képernyő tetején jelenjenek meg, függetlenül attól, hogy hol van az aktuális összetevő.
• Helyi menü: A helyi menüknek a felhasználó kattintási helyének közelében kell megjelenniük, függetlenül attól, hogy az hol található a DOM-hierarchiában.
• Harmadik féltől származó integráció: A harmadik féltől származó könyvtáraknak gyakran meg kell célozniuk a DOM tetszőleges részeit.

A portálhasználat legjobb gyakorlatai

Ha a legtöbbet szeretné kihozni a React portálokból, kövesse az alábbi tippeket:

• Válassza ki a megfelelő eseteket: A portálok rugalmasak, de nem mindenre van szükségük. Használjon portálokat, ha a rendszeres renderelés problémákat vagy ütközéseket okoz.
• Tartsa külön a portál tartalmát: Amikor portálokon keresztül jelenít meg tartalmat, győződjön meg arról, hogy az önálló. Nem szabad a szülő stílusára vagy kontextusára támaszkodnia.
• Események és műveletek kezelése: A portálokon az események egy kicsit másképp működnek a leválasztott tartalom miatt. Kezelje megfelelően az események terjedését és a műveleteket.

A React portálok előnyei

A React portálok számos előnyt kínálnak, amelyek elősegíthetik az összetett felhasználói felületek fejlesztését. Ők:

• Segítsen elválasztani a felhasználói felület problémáit a fő összetevőfától, javítva a kód karbantarthatóságát és olvashatóságát.
• Rugalmasságot biztosít azokhoz az összetevőkhöz, amelyeknek a szülőkomponensen kívül kell megjelenniük.
• Könnyítse meg a kezelőfelület többi részétől elkülönülő modális és fedvények létrehozását.
• Könnyedén vezérelheti az összetevők z-indexét, így biztosítva a felhasználói felület elemeinek rendezett rétegzését és egymásra halmozását.

Lehetséges buktatók és megfontolások

Bár a React portálok hasznosak, tartsa szem előtt a következőket:

• CSS-problémák: A portálok váratlan CSS-stílusú viselkedést okozhatnak, mivel a tartalmat a szülőkomponenseken kívülre helyezik. Használjon globális stílusokat, vagy gondosan kezelje a CSS hatókörét.
• Kisegítő lehetőségek: Amikor portálokat használ tartalom megjelenítésére, ne felejtse el érintetlenül hagyni a kisegítő lehetőségeket, például a billentyűzet navigációját és a képernyőolvasó kompatibilitását.
• Szerveroldali megjelenítés: Előfordulhat, hogy a portálok nem illeszkednek jól szerveroldali renderelés (SSR). Ismerje meg a portálok használatának hatásait és korlátait az SSR-beállításokban.

Propelling UI Beyond the Norm

A React Portals hatékony megoldást kínál olyan bonyolult felhasználói felületi helyzetek kezelésére, amelyekben a tartalomnak a szülőkomponensek határain túl kell megjelennie.

A portálok megértésével és a bevált gyakorlatok alkalmazásával olyan felhasználói felületeket építhet, amelyek jobban alkalmazkodnak és könnyebben karbantarthatók, miközben elkerüli a problémákat.

Akár modálokat készít, akár harmadik féltől származó könyvtárakat visz be, a React Portals hatékony választ ad az igényes felhasználói felületi igények kielégítésére.