Reagavimo portalai: išplėskite savo įrankių rinkinį ne tik gręžiant atramas

Key Takeaways

• Naudodami „React“ portalus galite pateikti komponento turinį už pagrindinio komponento hierarchijos ribų, todėl jis naudingas UI elementams, pvz., modalams ir perdangoms.
• Portalai gali būti naudojami įvairiuose scenarijuose, pvz., modaluose, trečiųjų šalių integracijose, kontekstiniuose meniu ir patarimuose, leidžiančius lanksčiai pateikti skirtingose ​​DOM vietose.
• Naudodami „React Portals“ galite atskirti vartotojo sąsajos problemas nuo pagrindinio komponentų medžio, pagerinti kodo priežiūrą ir lengvai valdyti NS elementų sluoksniavimo ir krovimo komponentų z indeksą.

Šiuolaikinėms žiniatinklio programoms reikia sąsajų, turinčių tokius elementus kaip modalai ir patarimai. Tačiau šie vartotojo sąsajos komponentai ne visada gali gerai integruotis su esama komponentų struktūra.

„React“ siūlo šios problemos sprendimą per funkciją, vadinamą portalais.

Kas yra React portalai?

„React“ portalai suteikia galimybę pateikti komponento turinį už pagrindinio komponento hierarchijos ribų. Kitaip tariant, jie leidžia pateikti komponento išvestį į kitą DOM elementą, kuris nėra dabartinio komponento antrinis.

Ši funkcija yra naudinga dirbant su vartotojo sąsajos komponentais, kuriuos reikia pateikti aukštesniu DOM lygiu, pvz., modalais ar perdangomis.

Reakcijų portalų naudojimas

„React“ portalai praverčia įvairiais atvejais:

• Modalai ir perdangos. Kai reikia rodyti modalinius dialogus arba perdangas, atvaizduokite juos viršutiniame DOM lygyje. Taip užtikrinama, kad tėvų stiliai ar išdėstymas jų neribotų.
• Trečiųjų šalių integracijos. Integruojant trečiųjų šalių bibliotekas, kurios numato pateikimą konkrečiose DOM vietose.
• Kontekstiniai meniu. Kontekstinių meniu, reaguojančių į vartotojo sąveiką, kūrimas, kurį reikia išdėstyti peržiūros srities arba konkretaus DOM elemento atžvilgiu.
• Patarimai ir iššokantys langai. Pateikiant patarimus arba iššokančius langus, kurie turi būti rodomi virš kitų komponentų, nepaisant jų padėties komponentų medyje.

Kaip veikia React portalai

Tradiciškai, kai pateikiate komponentą React, jo išvestį pridedate prie pagrindinio komponento DOM mazgo. Tai puikiai tinka daugeliui scenarijų, tačiau tai tampa ribota, kai reikia pateikti turinį už pirminės hierarchijos ribų.

Tarkime, kad kuriate modalinį dialogą. Pagal numatytuosius nustatymus modalo turinį įdėsite į pirminio komponento DOM mazgas.

Tai gali sukelti stiliaus konfliktus ir kitą nenumatytą elgesį, nes modalo turinys paveldi pirminių komponentų stilius ir apribojimus.

Reagavimo portalai pašalina šį apribojimą leisdami nurodyti tikslinį DOM elementą, kuriame turėtų būti pateikiama komponento išvestis.

Tai reiškia, kad galite pateikti bet kurį vartotojo sąsajos elementą už pirminės DOM hierarchijos ribų, išsivaduodami nuo pirminio stiliaus ir išdėstymo apribojimų.

Kaip naudotis React portalais

Modalai yra puikus pavyzdys, kada galite naudoti „React“ portalus. Šis pavyzdinis kodas paaiškina procedūrą.

Nustatykite pagrindinę „React“ programą

Prieš kurdami portalą įsitikinkite, kad nustatėte pagrindinę „React“ programą. Tu gali naudoti įrankiai, tokie kaip „Create React App“. greitai įgyvendinti projektą.

Sukurkite Modalų portalą

Norėdami sukurti portalą, naudokite ReactDOM.createPortal() funkcija. Tam reikalingi du argumentai: turinys, kurį norite pateikti, ir nuoroda į DOM mazgą, kuriame jis pateikiamas.

Šiame pavyzdyje Modal komponentas atvaizduoja savo vaikus naudodamas portalą. Turinys bus rodomas DOM elemente su ID „root“.

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

Galite apibrėžti konkretaus modalo turinį konkrečiame komponente. Pavyzdžiui, šiame „ModalContent“ komponente yra pastraipa ir a Uždaryti mygtukas:

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

exportdefault ModalContent;

Tada galite atidaryti Modal spustelėdami mygtuką, apibrėžtą 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;

Šiame pavyzdyje Modal komponentas pateikia savo turinį naudodamas portalą, atskirtą nuo pagrindinės komponentų hierarchijos.

Realaus pasaulio pavyzdžiai

React portalai naudingi įvairiose kasdienėse situacijose.

• Pranešimų sistema: kada pranešimų sistemos kūrimas, dažnai norite, kad pranešimai būtų ekrano viršuje, nesvarbu, kur yra dabartinis komponentas.
• Kontekstinis meniu: kontekstiniai meniu turėtų būti iššokti netoli tos vietos, kur vartotojas spustelėja, neatsižvelgiant į tai, kurioje DOM hierarchijos vietoje jis yra.
• Trečiųjų šalių integravimas: trečiųjų šalių bibliotekos dažnai turi taikyti savavališkas DOM dalis.

Geriausia portalo naudojimo praktika

Norėdami išnaudoti visas React portalų galimybes, vadovaukitės šiais patarimais:

• Pasirinkite tinkamus atvejus: Portalai yra lankstūs, bet ne viskam jų reikia. Naudokite portalus, kai dėl reguliaraus atvaizdavimo kyla problemų ar konfliktų.
• Portalo turinį laikykite atskirai: kai pateikiate turinį per portalus, įsitikinkite, kad jis yra savarankiškas. Ji neturėtų pasikliauti tėvų stiliais ar kontekstu.
• Tvarkykite įvykius ir veiksmus: naudojant portalus įvykiai veikia šiek tiek kitaip dėl atskirto turinio. Tinkamai tvarkykite įvykių plitimą ir veiksmus.

„React“ portalų privalumai

„React“ portalai siūlo keletą privalumų, kurie gali pagerinti sudėtingų vartotojo sąsajų kūrimą. Jie:

• Padėkite atskirti vartotojo sąsajos problemas nuo pagrindinio komponento medžio, pagerindami kodo priežiūrą ir skaitomumą.
• Suteikite lankstumo komponentams, kurie turi būti rodomi už pirminio komponento ribų.
• Palengvinkite modalų ir perdangų kūrimą, kurie būtų atskirti nuo likusios vartotojo sąsajos.
• Leiskite lengvai valdyti komponentų z indeksą ir užtikrinti, kad galėtumėte tvarkingai sluoksniuoti ir sudėti savo vartotojo sąsajos elementus.

Galimi spąstai ir svarstymai

Nors React portalai yra naudingi, atminkite šiuos dalykus:

• CSS problemos: portalai gali sukelti netikėtą CSS stiliaus elgesį, nes juose turinys yra už pirminių komponentų ribų. Naudokite visuotinius stilius arba atidžiai valdykite CSS apimtį.
• Pasiekiamumas: kai naudojate portalus turiniui pateikti, nepamirškite nepažeisti pritaikymo neįgaliesiems funkcijų, pvz., klaviatūros naršymo ir ekrano skaitytuvo suderinamumo.
• Serverio pusės atvaizdavimas: portalai gali būti netinkami serverio pusės atvaizdavimas (SSR). Supraskite portalų naudojimo SSR sąrankose poveikį ir apribojimus.

Propelling UI Beyond the Norm

„React“ portalai yra puikus sprendimas sudėtingoms vartotojo sąsajos situacijoms, kai turinys turi pasirodyti už pagrindinių komponentų ribų.

Atsižvelgdami į portalus ir naudodami geriausią praktiką, galite sukurti vartotojo sąsajas, kurios būtų labiau pritaikomos ir lengviau prižiūrimos, kartu išvengdami problemų.

Nesvarbu, ar kuriate modalus, ar įtraukiate trečiųjų šalių bibliotekas, „React Portals“ yra galingas atsakymas į sudėtingus vartotojo sąsajos poreikius.