Atraskite pažangius UI modelius su React Portalais. Išmokite atvaizduoti modalinius langus, patarimus ir pranešimus už komponentų medžio ribų, išsaugant React įvykių ir konteksto sistemą. Būtinas vadovas globaliems programuotojams.
React Portalų Įvaldymas: Komponentų Atvaizdavimas Už DOM Hierarchijos Ribų
Šiuolaikinio žiniatinklio programavimo platybėse React suteikė galių nesuskaičiuojamai daugybei programuotojų visame pasaulyje kurti dinamiškas ir itin interaktyvias vartotojo sąsajas. Jo komponentais pagrįsta architektūra supaprastina sudėtingas UI struktūras, skatindama pakartotinį naudojimą ir palaikomumą. Tačiau, net ir esant elegantiškam React dizainui, programuotojai kartais susiduria su scenarijais, kai standartinis komponentų atvaizdavimo metodas – kai komponentai savo išvestį atvaizduoja kaip vaikus savo tėvinio DOM elemento viduje – sukelia didelių apribojimų.
Apsvarstykite modalinį dialogą, kuris turi pasirodyti virš viso kito turinio, pranešimų juostą, kuri plaukioja globaliai, arba kontekstinį meniu, kuris turi ištrūkti iš perpildyto tėvinio konteinerio ribų. Tokiose situacijose įprastas komponentų atvaizdavimas tiesiogiai tėvinio DOM hierarchijoje gali sukelti iššūkių dėl stiliaus (pvz., z-index konfliktai), išdėstymo problemų ir įvykių sklidimo sudėtingumo. Būtent čia React Portalai tampa galingu ir nepakeičiamu įrankiu React programuotojo arsenale.
Šis išsamus vadovas gilinsis į React Portalų modelį, nagrinės jo pagrindines sąvokas, praktinius pritaikymus, pažangius aspektus ir geriausias praktikas. Nesvarbu, ar esate patyręs React programuotojas, ar tik pradedate savo kelionę, portalų supratimas atvers naujas galimybes kurti tikrai tvirtas ir globaliai prieinamas vartotojo patirtis.
Pagrindinio Iššūkio Supratimas: DOM Hierarchijos Apribojimai
Pagal numatytuosius nustatymus React komponentai savo išvestį atvaizduoja savo tėvinio komponento DOM mazge. Tai sukuria tiesioginį atitikmenį tarp React komponentų medžio ir naršyklės DOM medžio. Nors šis ryšys yra intuityvus ir paprastai naudingas, jis gali tapti kliūtimi, kai komponento vizualinis vaizdas turi išsilaisvinti iš tėvinio elemento apribojimų.
Dažniausi Scenarijai ir Jų Problemos:
- Modaliniai langai, Dialogai ir Šviesdėžės (Lightboxes): Šie elementai paprastai turi uždengti visą programą, nepriklausomai nuo to, kur jie yra apibrėžti komponentų medyje. Jei modalinis langas yra giliai įdėtas, jo CSS `z-index` gali būti apribotas jo protėvių, todėl sunku užtikrinti, kad jis visada būtų viršuje. Be to, `overflow: hidden` tėviniame elemente gali apkarpyti dalį modalinio lango.
- Patarimai (Tooltips) ir Iššokantys langai (Popovers): Panašiai kaip modaliniai langai, patarimai ar iššokantys langai dažnai turi būti pozicionuojami santykinai elemento atžvilgiu, bet atsirasti už jo potencialiai apribotų tėvinio elemento ribų. `overflow: hidden` tėviniame elemente galėtų apkarpyti patarimą.
- Pranešimai ir Trumpalaikiai Pranešimai (Toast Messages): Šie globalūs pranešimai dažnai atsiranda peržiūros srities viršuje arba apačioje, todėl juos reikia atvaizduoti nepriklausomai nuo komponento, kuris juos sukėlė.
- Kontekstiniai Meniu: Dešiniojo pelės klavišo meniu arba pasirinktiniai kontekstiniai meniu turi pasirodyti tiksliai ten, kur vartotojas paspaudžia, dažnai išsiverždami iš apribotų tėvinių konteinerių, kad būtų užtikrintas pilnas matomumas.
- Trečiųjų Šalių Integracijos: Kartais gali prireikti atvaizduoti React komponentą DOM mazge, kurį valdo išorinė biblioteka arba senas kodas, esantis už React šakninio elemento ribų.
Kiekviename iš šių scenarijų bandymas pasiekti norimą vizualinį rezultatą naudojant tik standartinį React atvaizdavimą dažnai sukelia painų CSS, pernelyg dideles `z-index` vertes arba sudėtingą pozicionavimo logiką, kurią sunku palaikyti ir plėsti. Būtent čia React Portalai siūlo švarų, idiominį sprendimą.
Kas Tiksliai Yra React Portalas?
React Portalas suteikia aukščiausios klasės būdą atvaizduoti vaikus DOM mazge, kuris egzistuoja už tėvinio komponento DOM hierarchijos ribų. Nors atvaizduojamas kitame fiziniame DOM elemente, portalo turinys vis tiek elgiasi taip, lyg būtų tiesioginis vaikas React komponentų medyje. Tai reiškia, kad jis išlaiko tą patį React kontekstą (pvz., Context API vertes) ir dalyvauja React įvykių burbuliavimo sistemoje.
React Portalų esmė slypi `ReactDOM.createPortal()` metode. Jo sintaksė yra paprasta:
ReactDOM.createPortal(child, container)
-
child
: Bet koks atvaizduojamas React vaikas, pavyzdžiui, elementas, eilutė ar fragmentas. -
container
: DOM elementas, kuris jau egzistuoja dokumente. Tai yra tikslinis DOM mazgas, kuriame bus atvaizduotas `child`.
Kai naudojate `ReactDOM.createPortal()`, React sukuria naują virtualų DOM submedį nurodytame `container` DOM mazge. Tačiau šis naujas submedis vis dar logiškai susijęs su komponentu, kuris sukūrė portalą. Šis „loginis ryšys“ yra raktas į supratimą, kodėl įvykių burbuliavimas ir kontekstas veikia taip, kaip tikėtasi.
Pirmojo React Portalo Sukūrimas: Paprastas Modalinis Pavyzdys
Panagrinėkime dažną naudojimo atvejį: modalinio dialogo kūrimą. Norint įdiegti portalą, pirmiausia reikia turėti tikslinį DOM elementą savo `index.html` faile (arba ten, kur yra jūsų programos šakninis HTML failas), kuriame bus atvaizduotas portalo turinys.
1 Žingsnis: Paruoškite Tikslinį DOM Mazgą
Atidarykite savo `public/index.html` failą (arba atitinkamą) ir pridėkite naują `div` elementą. Įprasta praktika yra pridėti jį tiesiai prieš uždarantį `body` žymą, už pagrindinio React programos šakninio elemento ribų.
<body>
<!-- Jūsų pagrindinis React programos šakninis elementas -->
<div id="root"></div>
<!-- Čia bus atvaizduotas mūsų portalo turinys -->
<div id="modal-root"></div>
</body>
2 Žingsnis: Sukurkite Portalo Komponentą
Dabar sukurkime paprastą modalinį komponentą, kuris naudoja portalą.
// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
const Modal = ({ children, isOpen, onClose }) => {
const el = useRef(document.createElement('div'));
useEffect(() => {
// Pridedame div prie modal-root, kai komponentas prijungiamas
modalRoot.appendChild(el.current);
// Išvalymas: pašaliname div, kai komponentas atjungiamas
return () => {
modalRoot.removeChild(el.current);
};
}, []); // Tuščias priklausomybių masyvas reiškia, kad tai įvyksta vieną kartą prijungiant ir vieną kartą atjungiant
if (!isOpen) {
return null; // Nieko neatvaizduojame, jei modalinis langas neatidarytas
}
return ReactDOM.createPortal(
<div style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1000 // Užtikriname, kad būtų viršuje
}}>
<div style={{
backgroundColor: 'white',
padding: '20px',
borderRadius: '8px',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
maxWidth: '500px',
width: '90%'
}}>
{children}
<button onClick={onClose} style={{ marginTop: '15px' }}>Uždaryti modalinį langą</button>
</div>
</div>,
el.current // Atvaizduojame modalinio lango turinį į mūsų sukurtą div, kuris yra modalRoot viduje
);
};
export default Modal;
Šiame pavyzdyje kiekvienam modalinio lango egzemplioriui sukuriame naują `div` elementą (`el.current`) ir pridedame jį prie `modal-root`. Tai leidžia mums valdyti kelis modalinius langus, jei reikia, kad jie netrukdytų vienas kito gyvavimo ciklui ar turiniui. Pats modalinio lango turinys (uždanga ir balta dėžutė) tada atvaizduojamas į šį `el.current` naudojant `ReactDOM.createPortal`.
3 Žingsnis: Naudokite Modal Komponentą
// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Darant prielaidą, kad Modal.js yra tame pačiame kataloge
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleOpenModal = () => setIsModalOpen(true);
const handleCloseModal = () => setIsModalOpen(false);
return (
<div style={{ padding: '20px' }}>
<h1>React Portalo Pavyzdys</h1>
<p>Šis turinys yra pagrindinės programos medžio dalis.</p>
<button onClick={handleOpenModal}>Atidaryti Globalų Modalinį Langą</button>
<Modal isOpen={isModalOpen} onClose={handleCloseModal}>
<h3>Sveikinimai iš Portalo!</h3>
<p>Šis modalinio lango turinys atvaizduojamas už 'root' div ribų, bet vis dar valdomas React.</p>
</Modal>
</div>
);
}
export default App;
Nors `Modal` komponentas atvaizduojamas `App` komponente (kuris pats yra `root` div viduje), jo faktinė DOM išvestis atsiranda `modal-root` div viduje. Tai užtikrina, kad modalinis langas uždengia viską be `z-index` ar `overflow` problemų, tuo pačiu pasinaudodamas React būsenos valdymu ir komponentų gyvavimo ciklu.
Pagrindiniai Naudojimo Atvejai ir Pažangūs React Portalų Pritaikymai
Nors modaliniai langai yra esminis pavyzdys, React Portalų naudingumas siekia daug toliau nei paprasti iššokantys langai. Panagrinėkime sudėtingesnius scenarijus, kuriuose portalai siūlo elegantiškus sprendimus.
1. Tvirtos Modalinės ir Dialogų Sistemos
Kaip matėme, portalai supaprastina modalinių langų įgyvendinimą. Pagrindiniai privalumai:
- Garantuotas Z-Index: Atvaizduojant `body` lygmenyje (arba tam skirtame aukšto lygio konteineryje), modaliniai langai visada gali pasiekti aukščiausią `z-index` be kovos su giliai įdėtais CSS kontekstais. Tai užtikrina, kad jie nuosekliai atsiranda virš viso kito turinio, nepriklausomai nuo to, kuris komponentas juos sukėlė.
- Išvengimas Perpildymo (Overflow): Tėviniai elementai su `overflow: hidden` ar `overflow: auto` daugiau neapkirps modalinio lango turinio. Tai yra labai svarbu dideliems modaliniams langams ar tiems, kurie turi dinamišką turinį.
- Prieinamumas (A11y): Portalai yra pagrindinis elementas kuriant prieinamus modalinius langus. Nors DOM struktūra yra atskirta, loginis React medžio ryšys leidžia tinkamai valdyti fokusą (įkalinant fokusą modalinio lango viduje) ir teisingai taikyti ARIA atributus (pvz., `aria-modal`). Bibliotekos, tokios kaip `react-focus-lock` arba `@reach/dialog`, plačiai naudoja portalus šiam tikslui.
2. Dinaminiai Patarimai, Iššokantys Langai ir Išskleidžiamieji Meniu
Panašiai kaip modaliniai langai, šie elementai dažnai turi atsirasti šalia paleidžiamojo elemento, bet taip pat išsiveržti iš apribotų tėvinių išdėstymų.
- Tikslus Pozicionavimas: Galite apskaičiuoti paleidžiamojo elemento poziciją atsižvelgiant į peržiūros sritį ir tada absoliučiai pozicionuoti patarimą naudojant JavaScript. Atvaizdavimas per portalą užtikrina, kad jo neapkirps `overflow` savybė jokiame tarpiniame tėviniame elemente.
- Išdėstymo Poslinkių Vengimas: Jei patarimas būtų atvaizduojamas eilutėje (inline), jo buvimas galėtų sukelti išdėstymo poslinkius jo tėviniame elemente. Portalai izoliuoja jo atvaizdavimą, užkertant kelią nenumatytiems perskaičiavimams (reflows).
3. Globalūs Pranešimai ir Trumpalaikiai Pranešimai (Toast Messages)
Programoms dažnai reikalinga sistema, skirta rodyti neblokuojančius, trumpalaikius pranešimus (pvz., „Prekė pridėta į krepšelį!“, „Prarastas tinklo ryšys“).
- Centralizuotas Valdymas: Vienas „ToastProvider“ komponentas gali valdyti trumpalaikių pranešimų eilę. Šis tiekėjas gali naudoti portalą, kad atvaizduotų visus pranešimus tam skirtoje `div` `body` viršuje arba apačioje, užtikrinant, kad jie visada būtų matomi ir nuosekliai stilizuoti, nepriklausomai nuo to, kurioje programos vietoje pranešimas yra sukeliamas.
- Nuoseklumas: Užtikrina, kad visi pranešimai sudėtingoje programoje atrodytų ir elgtųsi vienodai.
4. Pasirinktiniai Kontekstiniai Meniu
Kai vartotojas dešiniuoju pelės klavišu paspaudžia elementą, dažnai pasirodo kontekstinis meniu. Šis meniu turi būti tiksliai pozicionuotas ties žymeklio vieta ir uždengti visą kitą turinį. Portalai čia idealiai tinka:
- Meniu komponentas gali būti atvaizduotas per portalą, gaudamas paspaudimo koordinates.
- Jis pasirodys tiksliai ten, kur reikia, neapribotas paspausto elemento tėvinės hierarchijos.
5. Integracija su Trečiųjų Šalių Bibliotekomis arba ne React DOM Elementais
Įsivaizduokite, kad turite esamą programą, kurios dalį UI valdo sena JavaScript biblioteka arba galbūt pasirinktinis žemėlapių sprendimas, naudojantis savo DOM mazgus. Jei norite atvaizduoti mažą, interaktyvų React komponentą tokiame išoriniame DOM mazge, `ReactDOM.createPortal` yra jūsų tiltas.
- Galite sukurti tikslinį DOM mazgą trečiosios šalies valdomoje srityje.
- Tada naudokite React komponentą su portalu, kad įterptumėte savo React UI į tą konkretų DOM mazgą, leisdami React deklaratyviai galiai pagerinti ne React dalis jūsų programoje.
Pažangūs Aspektai Naudojant React Portalus
Nors portalai sprendžia sudėtingas atvaizdavimo problemas, labai svarbu suprasti, kaip jie sąveikauja su kitomis React funkcijomis ir DOM, kad būtų galima juos efektyviai panaudoti ir išvengti dažnų spąstų.
1. Įvykių Burbuliavimas: Svarbus Skirtumas
Vienas galingiausių ir dažnai neteisingai suprantamų React Portalų aspektų yra jų elgesys, susijęs su įvykių burbuliavimu. Nors jie atvaizduojami visiškai kitame DOM mazge, iš portalo elementų paleisti įvykiai vis tiek burbuliuos aukštyn per React komponentų medį, lyg portalo nebūtų. Taip yra todėl, kad React įvykių sistema yra sintetinė ir daugeliu atvejų veikia nepriklausomai nuo natūralaus DOM įvykių burbuliavimo.
- Ką tai reiškia: Jei turite mygtuką portalo viduje, ir to mygtuko paspaudimo įvykis burbuliuoja aukštyn, jis suaktyvins bet kokius `onClick` tvarkytuvus savo loginiuose tėviniuose komponentuose React medyje, o ne savo DOM tėviniame elemente.
- Pavyzdys: Jei jūsų `Modal` komponentą atvaizduoja `App`, paspaudimas `Modal` viduje burbuliuos iki `App` įvykių tvarkytuvų, jei jie sukonfigūruoti. Tai labai naudinga, nes išsaugo intuityvų įvykių srautą, kurio tikėtumėtės React.
- Natūralūs DOM Įvykiai: Jei tiesiogiai prijungsite natūralius DOM įvykių klausytojus (pvz., naudojant `addEventListener` ant `document.body`), jie seks natūralų DOM medį. Tačiau standartiniams React sintetiniams įvykiams (`onClick`, `onChange` ir t. t.) viršenybę turi React loginis medis.
2. Konteksto API ir Portalai
Konteksto API yra React mechanizmas, skirtas dalytis reikšmėmis (pvz., temos, vartotojo autentifikacijos būsena) per komponentų medį be „prop-drilling“. Laimei, Kontekstas veikia sklandžiai su portalais.
- Per portalą atvaizduotas komponentas vis tiek turės prieigą prie konteksto tiekėjų, kurie yra jo protėviai loginiame React komponentų medyje.
- Tai reiškia, kad galite turėti `ThemeProvider` savo `App` komponento viršuje, o per portalą atvaizduotas modalinis langas vis tiek paveldės tą temos kontekstą, supaprastindamas globalų stilių ir būsenos valdymą portalo turiniui.
3. Prieinamumas (A11y) su Portalais
Prieinamų UI kūrimas yra itin svarbus globaliai auditorijai, o portalai įveda specifinių A11y aspektų, ypač modaliniams langams ir dialogams.
- Fokuso Valdymas: Atidarius modalinį langą, fokusas turėtų būti įkalintas modalinio lango viduje, kad vartotojai (ypač naudojantys klaviatūrą ir ekrano skaitytuvus) negalėtų sąveikauti su už jo esančiais elementais. Uždarius modalinį langą, fokusas turėtų grįžti į elementą, kuris jį suaktyvino. Tam dažnai reikia atidaus JavaScript valdymo (pvz., naudojant `useRef` fokusuojamiems elementams valdyti arba specializuotą biblioteką, pvz., `react-focus-lock`).
- Navigacija Klaviatūra: Užtikrinkite, kad `Esc` klavišas uždarytų modalinį langą, o `Tab` klavišas cikliškai keistų fokusą tik modalinio lango viduje.
- ARIA Atributai: Teisingai naudokite ARIA vaidmenis ir savybes, tokias kaip `role="dialog"`, `aria-modal="true"`, `aria-labelledby` ir `aria-describedby` savo portalo turiniui, kad perteiktumėte jo paskirtį ir struktūrą pagalbinėms technologijoms.
4. Stiliaus Iššūkiai ir Sprendimai
Nors portalai sprendžia DOM hierarchijos problemas, jie stebuklingai neišsprendžia visų stiliaus sudėtingumų.
- Globalūs vs. Apriboti Stiliai: Kadangi portalo turinys atvaizduojamas globaliai prieinamame DOM mazge (pvz., `body` arba `modal-root`), bet kokios globalios CSS taisyklės gali jį paveikti.
- CSS-in-JS ir CSS Moduliai: Šie sprendimai gali padėti inkapsuliuoti stilius ir išvengti netyčinių nutekėjimų, todėl jie yra ypač naudingi stilizuojant portalo turinį. Styled Components, Emotion ar CSS Moduliai gali generuoti unikalius klasių pavadinimus, užtikrindami, kad jūsų modalinio lango stiliai nekonfliktuotų su kitomis programos dalimis, net jei jie atvaizduojami globaliai.
- Temų Pritaikymas (Theming): Kaip minėta su Konteksto API, užtikrinkite, kad jūsų temų sprendimas (ar tai būtų CSS kintamieji, CSS-in-JS temos, ar kontekstu pagrįstos temos) teisingai persiduotų portalo vaikams.
5. Serverio Pusės Atvaizdavimo (SSR) Aspektai
Jei jūsų programa naudoja Serverio Pusės Atvaizdavimą (SSR), turite būti atidūs, kaip elgiasi portalai.
- `ReactDOM.createPortal` reikalauja DOM elemento kaip `container` argumento. SSR aplinkoje pradinis atvaizdavimas vyksta serveryje, kur nėra naršyklės DOM.
- Tai reiškia, kad portalai paprastai nebus atvaizduojami serveryje. Jie bus „hidratuojami“ arba atvaizduojami tik tada, kai JavaScript bus įvykdytas kliento pusėje.
- Turiniui, kuris būtinai *turi* būti pradiniame serverio atvaizdavime (pvz., dėl SEO ar kritinio pirmojo atvaizdavimo našumo), portalai nėra tinkami. Tačiau interaktyviems elementams, tokiems kaip modaliniai langai, kurie paprastai yra paslėpti, kol juos suaktyvina veiksmas, tai retai būna problema. Užtikrinkite, kad jūsų komponentai grakščiai tvarkytų portalo `container` nebuvimą serveryje, tikrindami jo egzistavimą (pvz., `document.getElementById('modal-root')`).
6. Komponentų, Naudojančių Portalus, Testavimas
Komponentų, kurie atvaizduojami per portalus, testavimas gali šiek tiek skirtis, bet yra gerai palaikomas populiarių testavimo bibliotekų, tokių kaip React Testing Library.
- React Testing Library: Ši biblioteka pagal numatytuosius nustatymus ieško `document.body`, kur tikėtina, kad bus jūsų portalo turinys. Taigi, ieškant elementų jūsų modaliniame lange ar patarime, dažnai viskas „tiesiog veiks“.
- Imitavimas (Mocking): Kai kuriais sudėtingais scenarijais arba jei jūsų portalo logika yra glaudžiai susijusi su konkrečiomis DOM struktūromis, gali tekti imituoti arba atidžiai paruošti tikslinį `container` elementą savo testavimo aplinkoje.
Dažniausios Klaidos ir Geriausios Praktikos Naudojant React Portalus
Kad užtikrintumėte, jog jūsų React Portalų naudojimas yra efektyvus, palaikomas ir gerai veikia, apsvarstykite šias geriausias praktikas ir venkite dažnų klaidų:
1. Nenaudokite Portalų Pernelyg Dažnai
Portalai yra galingi, tačiau juos reikėtų naudoti apgalvotai. Jei komponento vizualinę išvestį galima pasiekti nepažeidžiant DOM hierarchijos (pvz., naudojant santykinį ar absoliutų pozicionavimą neperpildytame tėviniame elemente), darykite tai. Pernelyg didelis pasikliavimas portalais kartais gali apsunkinti DOM struktūros derinimą, jei jis nėra kruopščiai valdomas.
2. Užtikrinkite Tinkamą Išvalymą (Atjungimą)
Jei dinamiškai sukuriate DOM mazgą savo portalui (kaip mūsų `Modal` pavyzdyje su `el.current`), užtikrinkite, kad jį išvalytumėte, kai atjungiamas komponentas, naudojantis portalą. `useEffect` išvalymo funkcija tam puikiai tinka, užkertant kelią atminties nutekėjimams ir DOM apkrovimui našlaičiais elementais.
useEffect(() => {
// ... pridedame el.current
return () => {
// ... pašaliname el.current;
};
}, []);
Jei visada atvaizduojate į fiksuotą, iš anksto egzistuojantį DOM mazgą (pvz., vieną `modal-root`), paties *mazgo* išvalymas nėra būtinas, tačiau React automatiškai pasirūpina, kad *portalo turinys* būtų tinkamai atjungtas, kai atjungiamas tėvinis komponentas.
3. Našumo Aspektai
Daugeliu naudojimo atvejų (modaliniai langai, patarimai) portalai turi nereikšmingą poveikį našumui. Tačiau, jei per portalą atvaizduojate itin didelį ar dažnai atnaujinamą komponentą, apsvarstykite įprastas React našumo optimizacijas (pvz., `React.memo`, `useCallback`, `useMemo`), kaip tai darytumėte bet kuriam kitam sudėtingam komponentui.
4. Visada Teikite Pirmenybę Prieinamumui
Kaip pabrėžta, prieinamumas yra labai svarbus. Užtikrinkite, kad jūsų per portalą atvaizduotas turinys atitiktų ARIA gaires ir suteiktų sklandžią patirtį visiems vartotojams, ypač tiems, kurie pasikliauja navigacija klaviatūra ar ekrano skaitytuvais.
- Modalinio lango fokuso įkalinimas: Įdiekite arba naudokite biblioteką, kuri įkalina klaviatūros fokusą atidaryto modalinio lango viduje.
- Aprašomieji ARIA atributai: Naudokite `aria-labelledby`, `aria-describedby`, kad susietumėte modalinio lango turinį su jo pavadinimu ir aprašymu.
- Uždarymas klaviatūra: Leiskite uždaryti su `Esc` klavišu.
- Fokuso atkūrimas: Uždarius modalinį langą, grąžinkite fokusą į elementą, kuris jį atidarė.
5. Naudokite Semantinį HTML Portalų Viduje
Nors portalas leidžia vizualiai atvaizduoti turinį bet kur, nepamirškite naudoti semantinių HTML elementų savo portalo vaikų viduje. Pavyzdžiui, dialogas turėtų naudoti `
6. Kontekstualizuokite Savo Portalo Logiką
Sudėtingoms programoms apsvarstykite galimybę inkapsuliuoti savo portalo logiką į pakartotinai naudojamą komponentą arba pasirinktinį „hook'ą“. Pavyzdžiui, `useModal` „hook'as“ arba bendrinis `PortalWrapper` komponentas gali abstrahuoti `ReactDOM.createPortal` iškvietimą ir tvarkyti DOM mazgo kūrimą/išvalymą, todėl jūsų programos kodas tampa švaresnis ir moduliškesnis.
// Paprasto PortalWrapper pavyzdys
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
const createWrapperAndAppendToBody = (wrapperId) => {
const wrapperElement = document.createElement('div');
wrapperElement.setAttribute('id', wrapperId);
document.body.appendChild(wrapperElement);
return wrapperElement;
};
const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
const [wrapperElement, setWrapperElement] = useState(null);
useEffect(() => {
let element = document.getElementById(wrapperId);
let systemCreated = false;
// jei elementas su wrapperId neegzistuoja, sukurti jį ir pridėti prie body
if (!element) {
systemCreated = true;
element = createWrapperAndAppendToBody(wrapperId);
}
setWrapperElement(element);
return () => {
// Ištrinti programiškai sukurtą elementą
if (systemCreated && element.parentNode) {
element.parentNode.removeChild(element);
}
};
}, [wrapperId]);
if (!wrapperElement) return null;
return ReactDOM.createPortal(children, wrapperElement);
};
export default PortalWrapper;
Šis `PortalWrapper` leidžia jums tiesiog apgaubti bet kokį turinį, ir jis bus atvaizduotas dinamiškai sukurtame (ir išvalytame) DOM mazge su nurodytu ID, supaprastinant naudojimą visoje jūsų programoje.
Išvada: Globalios UI Kūrimo Stiprinimas su React Portalais
React Portalai yra elegantiška ir esminė funkcija, kuri suteikia programuotojams galimybę išsilaisvinti iš tradicinių DOM hierarchijos apribojimų. Jie suteikia tvirtą mechanizmą kurti sudėtingus, interaktyvius UI elementus, tokius kaip modaliniai langai, patarimai, pranešimai ir kontekstiniai meniu, užtikrinant, kad jie elgtųsi teisingai tiek vizualiai, tiek funkciškai.
Suprasdami, kaip portalai palaiko loginį React komponentų medį, leidžiantį sklandų įvykių burbuliavimą ir konteksto srautą, programuotojai gali kurti tikrai sudėtingas ir prieinamas vartotojo sąsajas, pritaikytas įvairioms pasaulinėms auditorijoms. Nesvarbu, ar kuriate paprastą svetainę, ar sudėtingą verslo programą, React Portalų įvaldymas ženkliai pagerins jūsų gebėjimą kurti lanksčias, našias ir malonias vartotojo patirtis. Priimkite šį galingą modelį ir atrakinkite naują React programavimo lygį!