Reaģēšanas portāli: paplašiniet savu rīkkopu, ne tikai veicot urbšanas darbus

Key Takeaways

• React Portals ļauj renderēt komponenta saturu ārpus tā vecākkomponentu hierarhijas, padarot to noderīgu lietotāja saskarnes elementiem, piemēram, modāliem un pārklājumiem.
• Portālus var izmantot dažādos scenārijos, piemēram, modālos, trešo pušu integrācijās, kontekstizvēlnēs un rīka padomos, kas ļauj elastīgi renderēt dažādās DOM vietās.
• Izmantojot React Portals, varat atdalīt lietotāja saskarnes problēmas no galvenā komponentu koka, uzlabot koda apkopi un viegli kontrolēt komponentu z-indeksu UI elementu slāņošanai un sakraušanai.

Mūsdienu tīmekļa lietojumprogrammām ir nepieciešamas saskarnes, kurās ir tādi elementi kā modāli un rīka padomi. Taču šie lietotāja interfeisa komponenti ne vienmēr var labi integrēties esošajā komponentu struktūrā.

React piedāvā šīs problēmas risinājumu, izmantojot funkciju, ko sauc par portāliem.

Kas ir React portāli?

Reakcijas portāli nodrošina veidu, kā atveidot komponenta saturu ārpus tā vecākkomponentu hierarhijas. Citiem vārdiem sakot, tie ļauj atveidot komponenta izvadi citā DOM elementā, kas nav pašreizējā komponenta atvasinājums.

Šī funkcija ir noderīga, strādājot ar lietotāja interfeisa komponentiem, kas jārenderē augstākā DOM līmenī, piemēram, modāliem vai pārklājumiem.

Reakcijas portālu izmantošana

React portāli noder dažādos scenārijos:

• Modāļi un pārklājumi. Ja jums ir jāparāda modāli dialogi vai pārklājumi, renderējiet tos DOM augšējā līmenī. Tas nodrošina, ka vecāku stili vai izkārtojums viņus neierobežo.
• Trešo pušu integrācijas. Integrējot trešo pušu bibliotēkas, kas paredz renderēšanu noteiktās DOM vietās.
• Konteksta izvēlnes. Izveidojiet kontekstizvēlnes, kas reaģē uz lietotāja mijiedarbību un kuras jums ir jānovieto attiecībā pret skata logu vai noteiktu DOM elementu.
• Rīku padomi un uznirstošie elementi. Renderējot rīka padomus vai uznirstošos logus, kuriem jāparādās virs citiem komponentiem neatkarīgi no to atrašanās vietas komponentu kokā.

Kā darbojas reaģēšanas portāli

Tradicionāli, renderējot komponentu programmā React, tā izvade tiek pievienota vecākkomponenta DOM mezglam. Tas labi darbojas lielākajā daļā scenāriju, taču tas kļūst ierobežojošs, ja jums ir nepieciešams renderēt saturu ārpus vecāku hierarhijas.

Pieņemsim, ka veidojat modālu dialogu. Pēc noklusējuma modāla saturs tiks ievietots laukā vecākkomponenta DOM mezgls.

Tas var izraisīt stila konfliktus un citas neparedzētas darbības, jo modāla saturs pārmanto tā vecākkomponentu stilus un ierobežojumus.

Reakcijas portāli novērš šo ierobežojumu, ļaujot norādīt mērķa DOM elementu, kurā jārenderē komponenta izvade.

Tas nozīmē, ka varat renderēt jebkuru lietotāja interfeisa elementu ārpus vecāka DOM hierarhijas, atbrīvojoties no vecāku stilu un izkārtojuma ierobežojumiem.

Kā lietot React portālus

Modāļi ir lielisks piemērs tam, kad varat izmantot React portālus. Šis parauga kods izskaidro procedūru.

Iestatiet pamata React lietojumprogrammu

Pirms portāla izveides pārliecinieties, vai ir iestatīta pamata lietojumprogramma React. Tu vari izmantot rīki, piemēram, Create React App lai ātri izveidotu projektu.

Izveidojiet portālu modāļiem

Lai izveidotu portālu, izmantojiet ReactDOM.createPortal() funkciju. Tam nepieciešami divi argumenti: saturs, kuru vēlaties renderēt, un atsauce uz DOM mezglu, lai to renderētu.

Šajā piemērā Modal komponents atveido savus bērnus, izmantojot portālu. Saturs parādīsies DOM elementā ar ID “root”.

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

Jūs varat definēt konkrēta modāla saturu noteiktā komponentā. Piemēram, šajā ModalContent komponentā ir rindkopa un a Aizvērt poga:

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

exportdefault ModalContent;

Pēc tam varat atvērt Modal, noklikšķinot uz pogas, kas definēta 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;

Šajā piemērā Modal komponents atveido savu saturu, izmantojot portālu, kas ir atdalīts no galvenā komponenta hierarhijas.

Reālās pasaules piemēri

React portāli ir noderīgi dažādās ikdienas situācijās.

• Paziņojumu sistēma: Kad paziņošanas sistēmas izveide, jūs bieži vēlaties, lai ziņojumi tiktu rādīti ekrāna augšdaļā, neatkarīgi no tā, kur atrodas pašreizējais komponents.
• Konteksta izvēlne: konteksta izvēlnēm vajadzētu parādīties tuvu vietai, kur lietotājs noklikšķina, neatkarīgi no tā, kur tā atrodas DOM hierarhijā.
• Trešās puses integrācija: trešo pušu bibliotēkām bieži ir jāatlasa patvaļīgas DOM daļas.

Portāla lietošanas paraugprakse

Lai maksimāli izmantotu React portālus, ievērojiet šos padomus:

• Izvēlieties pareizos gadījumus: portāli ir elastīgi, taču ne visam tie ir vajadzīgi. Izmantojiet portālus, ja regulāra renderēšana rada problēmas vai sadursmes.
• Saglabājiet portāla saturu atsevišķi: renderējot saturu, izmantojot portālus, pārliecinieties, vai tas ir autonoms. Tam nevajadzētu paļauties uz vecāku stilu vai kontekstu.
• Pārvaldiet notikumus un darbības: portālos notikumi darbojas nedaudz savādāk atdalītā satura dēļ. Pareizi rīkojieties ar notikumu izplatīšanu un darbībām.

React portālu priekšrocības

React portāli piedāvā vairākas priekšrocības, kas var uzlabot sarežģītu lietotāja saskarņu izstrādi. Viņi:

• Palīdziet nodalīt lietotāja saskarnes problēmas no galvenā komponentu koka, uzlabojot koda apkopi un lasāmību.
• Nodrošiniet elastību komponentiem, kas jāparāda ārpus to vecākkomponenta.
• Atvieglo modālu un pārklājumu izveidi, kas ir atsevišķi no pārējās lietotāja saskarnes.
• Ļaujiet jums viegli kontrolēt komponentu z-indeksu, nodrošinot, ka varat kārtīgi slāņot un sakārtot lietotāja interfeisa elementus.

Iespējamās nepilnības un apsvērumi

Lai gan React portāli ir noderīgi, paturiet prātā tālāk norādītās lietas.

• CSS problēmas: portāli var izraisīt neparedzētu CSS stila darbību, jo saturs tiek ievietots ārpus vecākkomponentiem. Izmantojiet globālos stilus vai rūpīgi pārvaldiet CSS tvērumu.
• Pieejamība: kad satura renderēšanai izmantojat portālus, neaizmirstiet saglabāt neskartas pieejamības funkcijas, piemēram, tastatūras navigāciju un ekrāna lasītāja saderību.
• Servera puses renderēšana: portāli var neatbilst labi servera puses renderēšana (SSR). Izprotiet portālu lietošanas ietekmi un ierobežojumus SSR iestatījumos.

Propelling UI Beyond the Norm

React portāli piedāvā spēcīgu risinājumu sarežģītu lietotāja interfeisa situāciju risināšanai, kur saturam ir jāparādās ārpus vecāku komponentu robežām.

Izprotot portālus un izmantojot labāko praksi, varat izveidot lietotāja saskarnes, kuras ir vieglāk pielāgojamas un vieglāk uzturamas, vienlaikus izvairoties no problēmām.

Neatkarīgi no tā, vai veidojat modālus vai ieviešat trešo pušu bibliotēkas, React Portals sniedz spēcīgu atbildi sarežģītu lietotāja interfeisa vajadzību risināšanai.