Reageerimisportaalid: laiendage oma tööriistakasti ka prop puurimisest kaugemale

Võtmed kaasavõtmiseks

• Reaktsiooniportaalid võimaldavad teil renderdada komponendi sisu väljaspool selle emakomponentide hierarhiat, muutes selle kasulikuks kasutajaliidese elementide jaoks, nagu modaalid ja ülekatted.
• Portaale saab kasutada mitmesugustes stsenaariumides, näiteks modaalides, kolmandate osapoolte integratsioonides, kontekstimenüüdes ja tööriistaspikrites, võimaldades paindlikku renderdamist erinevates DOM-i asukohtades.
• Reactiportaalide abil saate eraldada kasutajaliidese probleemid põhikomponentide puust, parandada koodi hooldatavust ja hõlpsalt juhtida komponentide z-indeksit kasutajaliidese elementide kihistamiseks ja virnastamiseks.

Kaasaegsed veebirakendused vajavad liideseid, mis sisaldavad selliseid elemente nagu modaalid ja tööriistaspikrid. Kuid need kasutajaliidese komponendid ei pruugi alati olemasoleva komponendistruktuuriga hästi integreeruda.

React pakub sellele probleemile lahendust portaalide nimelise funktsiooni kaudu.

Mis on reageerimisportaalid?

Reaktsiooniportaalid pakuvad võimalust renderdada komponendi sisu väljaspool selle emakomponendi hierarhiat. Teisisõnu, need võimaldavad teil renderdada komponendi väljundit erinevaks DOM-elemendiks, mis ei ole praeguse komponendi alamelement.

See funktsioon on mugav, kui käsitlete kasutajaliidese komponente, mis peavad renderdama DOM-is kõrgemal tasemel (nt modaalid või ülekatted).

Reactiportaalide kasutusalad

Reaktsiooniportaalid on kasulikud erinevate stsenaariumide korral:

• Modaalid ja ülekatted. Kui teil on vaja kuvada modaalseid dialooge või ülekatteid, renderdage need DOM-i ülemisel tasemel. See tagab, et vanema stiilid või paigutus ei piira neid.
• Kolmandate osapoolte integratsioonid. Kolmandate osapoolte teekide integreerimisel, mis eeldavad renderdamist kindlates DOM-i asukohtades.
• Kontekstimenüüd. Kasutaja interaktsioonidele reageerivate kontekstimenüüde loomine, mida peate vaateava või konkreetse DOM-i elemendi suhtes paigutama.
• Tööriistavihjed ja hüpikaknad. Tööriistavihjete või hüpikaknate renderdamisel, mis peavad ilmuma teiste komponentide peale, olenemata nende asukohast komponendipuus.

Kuidas reageerimisportaalid töötavad

Tavaliselt lisate Reactis komponendi renderdamisel selle väljundi emakomponendi DOM-sõlmele. See toimib enamiku stsenaariumide puhul hästi, kuid muutub piiravaks, kui peate renderdama sisu väljaspool vanema hierarhiat.

Oletame, et loote modaalset dialoogi. Vaikimisi paigutate modaali sisu sisse emakomponendi DOM-sõlm.

See võib põhjustada stiilikonflikte ja muud soovimatut käitumist, kuna modaali sisu pärib selle põhikomponentide stiilid ja piirangud.

Reaktsiooniportaalid lahendavad selle piirangu, lubades teil määrata DOM-i sihtelemendi, kus komponendi väljund peaks renderdama.

See tähendab, et saate renderdada mis tahes kasutajaliidese elemendi väljaspool vanema DOM-i hierarhiat, vabanedes vanema stiilide ja paigutuse piirangutest.

Kuidas Reacti portaale kasutada

Modaalid on suurepärane näide sellest, millal võite kasutada React Portale. See näidiskood selgitab protseduuri.

Seadistage põhiline reageerimisrakendus

Enne portaali loomist veenduge, et Reacti põhirakendus oleks seadistatud. Sa võid kasutada tööriistad nagu Loo React App projekti kiireks elluviimiseks.

Looge modaalide portaal

Portaali loomiseks kasutage ReactDOM.createPortal() funktsiooni. Selle renderdamiseks on vaja kahte argumenti: sisu, mida soovite renderdada, ja viidet DOM-i sõlmele.

Selles näites renderdab komponent Modal oma lapsed portaali kasutades. Sisu kuvatakse DOM-i elemendis ID-ga „juur”.

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

Saate määratleda konkreetse modaali sisu konkreetses komponendis. Näiteks sisaldab see ModalContenti komponent lõiku ja a Sulge nupp:

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

exportdefault ModalContent;

Seejärel saate modaali avada rakenduses App.js määratletud nupuklõpsuga:

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

Selles näites renderdab komponent Modal oma sisu portaali abil, mis on põhikomponendi hierarhiast eraldatud.

Näited tegelikust maailmast

Reacti portaalid on kasulikud erinevates igapäevastes olukordades.

• Teavitussüsteem: millal teavitussüsteemi loomine, soovite sageli sõnumeid ekraani ülaosas, olenemata praeguse komponendi asukohast.
• Kontekstimenüü: kontekstimenüüd peaksid hüppama kasutaja klõpsamiskoha lähedale, olenemata sellest, kus see DOM-i hierarhias asub.
• Kolmanda osapoole integreerimine: kolmanda osapoole teegid peavad sageli sihtima DOM-i suvalisi osi.

Portaali kasutamise parimad tavad

Reacti portaalidest maksimaalse kasu saamiseks järgige neid näpunäiteid.

• Valige õiged juhtumid: Portaalid on paindlikud, kuid mitte kõik ei vaja neid. Kasutage portaale, kui tavaline renderdamine põhjustab probleeme või kokkupõrkeid.
• Hoidke portaali sisu eraldi: kui renderdate sisu portaalide kaudu, veenduge, et see oleks iseseisev. See ei tohiks tugineda vanemate stiilidele ega kontekstile.
• Sündmuste ja toimingute haldamine: portaalide puhul toimivad sündmused eraldatud sisu tõttu pisut teisiti. Käsitlege sündmuste levikut ja toiminguid õigesti.

Reacti portaalide eelised

Reacti portaalid pakuvad mitmeid eeliseid, mis võivad täiustada keerukate kasutajaliideste arendamist. Nad:

• Aidake eraldada kasutajaliidese probleemid põhikomponentide puust, parandades koodi hooldatavust ja loetavust.
• Paindlikkus komponentide jaoks, mida tuleb kuvada väljaspool oma emakomponenti.
• Muutke ülejäänud kasutajaliidestest eraldiseisvate modaalide ja ülekatete loomine lihtsaks.
• Saate hõlpsasti juhtida komponentide z-indeksit, tagades kasutajaliidese elementide korraliku kihistamise ja virnastamise.

Võimalikud lõksud ja kaalutlused

Kuigi Reacti portaalid on kasulikud, pidage meeles järgmisi asju.

• CSS-i probleemid: portaalid võivad põhjustada ootamatut CSS-stiili käitumist, kuna need asetavad sisu väljapoole emakomponente. Kasutage globaalseid stiile või hallake hoolikalt CSS-i ulatust.
• Juurdepääsetavus: kui kasutate sisu renderdamiseks portaale, jätke juurdepääsetavusfunktsioonid, nagu klaviatuuriga navigeerimine ja ekraanilugeja ühilduvus, puutumatuna.
• Serveripoolne renderdus: portaalid ei pruugi nendega hästi haakuda serveripoolne renderdus (SSR). Saate aru portaalide kasutamise mõjudest ja piirangutest SSR-i seadistustes.

Liikumise kasutajaliides üle normi

Reacti portaalid pakuvad tugevat lahendust keeruliste kasutajaliidese olukordade lahendamiseks, mis vajavad sisu, mis kuvatakse väljaspool põhikomponentide piire.

Portaale haarates ja parimaid tavasid kasutades saate luua kasutajaliideseid, mis on kohandatavamad ja hõlpsamini hooldatavad, vältides samal ajal probleeme.

Olenemata sellest, kas loote modaale või tood sisse kolmandate osapoolte teeke, pakuvad React Portals võimsat vastust nõudlike kasutajaliidese vajaduste rahuldamiseks.