Reacti portaalid: sisu renderdamine väljaspool komponendipuud

Reacti portaalid pakuvad võimsat mehhanismi alamkomponentide renderdamiseks DOM-sõlme, mis asub väljaspool vanemkomponendi DOM-hierarhiat. See tehnika on hindamatu erinevates stsenaariumides, näiteks modaalakende, tööriistavihjete ja olukordade puhul, kus on vaja täpset kontrolli elementide positsioneerimise ja virnastamisjärjekorra üle lehel.

Mis on Reacti portaalid?

Tüüpilises Reacti rakenduses renderdatakse komponendid ranges hierarhilises struktuuris. Vanemkomponent sisaldab alamkomponente ja nii edasi. Mõnikord on aga vaja sellest struktuurist välja murda. Siin tulevadki appi Reacti portaalid. Portaal võimaldab teil renderdada komponendi sisu DOM-i teise ossa, isegi kui see osa ei ole Reacti puus komponendi otsene järeltulija.

Kujutage ette, et teil on modaalakna komponent, mida tuleb kuvada teie rakenduse ülemisel tasemel, sõltumata sellest, kus see komponendipuus renderdatakse. Ilma portaalideta võiksite proovida seda saavutada absoluutse positsioneerimise ja z-indeksi abil, mis võib põhjustada keerulisi stiiliprobleeme ja potentsiaalseid konflikte. Portaalidega saate modaalakna sisu otse renderdada spetsiifilisse DOM-sõlme, näiteks spetsiaalsesse "modal-root" elementi, tagades, et see renderdatakse alati õigel tasemel.

Miks kasutada Reacti portaale?

Reacti portaalid lahendavad mitmeid levinud väljakutseid veebiarenduses:

• Modaalaknad ja dialoogid: Portaalid on ideaalne lahendus modaalakende ja dialoogide renderdamiseks, tagades, et need ilmuvad kogu muu sisu peal, ilma et neid piiraksid nende vanemkomponentide stiil ja paigutus.
• Tööriistavihjed ja hüpikaknad: Sarnaselt modaalakendele tuleb ka tööriistavihjeid ja hüpikaknaid sageli positsioneerida absoluutselt kindla elemendi suhtes, olenemata selle asukohast komponendipuus. Portaalid lihtsustavad seda protsessi.
• CSS-konfliktide vältimine: Keeruliste paigutuste ja pesastatud komponentidega tegelemisel võivad pärilikest stiilidest tulenevalt tekkida CSS-konfliktid. Portaalid võimaldavad teil teatud komponentide stiili isoleerida, renderdades need väljaspool vanema DOM-hierarhiat.
• Parem juurdepääsetavus: Portaalid võivad parandada juurdepääsetavust, võimaldades teil kontrollida nende elementide fookusjärjekorda ja DOM-struktuuri, mis on visuaalselt paigutatud mujale lehel. Näiteks kui modaalaken avaneb, saate tagada, et fookus paigutatakse kohe modaalakna sisse, parandades nii klaviatuuri- ja ekraanilugeja kasutajate kasutajakogemust.
• Kolmandate osapoolte integratsioonid: Integreerimisel kolmandate osapoolte teekide või komponentidega, millel on spetsiifilised DOM-nõuded, võivad portaalid olla kasulikud sisu renderdamiseks nõutavasse DOM-struktuuri ilma aluseks olevat teegi koodi muutmata. Mõelge integratsioonidele kaardirakenduste teekidega nagu Leaflet või Google Maps, mis nõuavad sageli spetsiifilisi DOM-struktuure.

Kuidas Reacti portaale implementeerida

Reacti portaalide kasutamine on lihtne. Siin on samm-sammuline juhend:

1. Looge DOM-sõlm: Esmalt looge DOM-sõlm, kuhu soovite portaali sisu renderdada. Tavaliselt tehakse seda teie `index.html` failis. Näiteks:

               <div id="modal-root"></div>
               
   
                 
                   Copy
                 
               
             

2. Kasutage `ReactDOM.createPortal()`: Oma Reacti komponendis kasutage meetodit `ReactDOM.createPortal()`, et renderdada sisu loodud DOM-sõlme. See meetod võtab kaks argumenti: Reacti sõlme (sisu, mida soovite renderdada) ja DOM-sõlme, kuhu soovite selle renderdada.

               import ReactDOM from 'react-dom';
   
   function MyComponent() {
     return ReactDOM.createPortal(
       <div>Seda sisu renderdatakse modal-root'is!</div>,
       document.getElementById('modal-root')
     );
   }
   
   export default MyComponent;
               
   
                 
                   Copy
                 
               
             

3. Renderdage komponent: Renderdage portaali sisaldav komponent nii, nagu teeksite seda iga teise Reacti komponendiga.

               function App() {
     return (
       <div>
         <h1>Minu rakendus</h1>
         <MyComponent />
       </div>
     );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

Selles näites renderdatakse `MyComponent`'i sisu `modal-root` elemendi sisse, kuigi `MyComponent` renderdatakse `App` komponendi sees.

Näide: modaalakna komponendi loomine Reacti portaalidega

Loome täieliku modaalakna komponendi, kasutades Reacti portaale. See näide sisaldab põhilist stiili ja funktsionaalsust modaalakna avamiseks ja sulgemiseks.

            import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Sule</button>
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Minu rakendus</h1>
      <button onClick={handleOpenModal}>Ava modaalaken</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modaalakna sisu</h2>
          <p>See on modaalakna sisu.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites:

• Loome `Modal` komponendi, mis kasutab `ReactDOM.createPortal()` sisu renderdamiseks `modal-root` elementi.
• `Modal` komponent saab `children` prop'ina, mis võimaldab teil edastada mis tahes sisu, mida soovite modaalaknas kuvada.
• `onClose` prop on funktsioon, mida kutsutakse välja, kui modaalaken suletakse.
• `App` komponent haldab modaalakna olekut (kas see on avatud või suletud) ja renderdab `Modal` komponenti tingimuslikult.

Samuti peate lisama CSS-stiili `modal-overlay` ja `modal` klassidele, et modaalaken ekraanil õigesti positsioneerida. Näiteks:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

            

              
                Copy
              
            
          

Sündmuste käsitlemine portaalidega

Üks oluline kaalutlus portaalide kasutamisel on sündmuste käsitlemine. Sündmuste mullitamine (event bubbling) töötab portaalidega erinevalt kui standardsete Reacti komponentidega.

Kui sündmus toimub portaali sees, mullitab see tavapäraselt üles läbi DOM-puu. Kuid Reacti sündmustesüsteem käsitleb portaali kui tavalist Reacti sõlme, mis tähendab, et sündmused mullitavad ka üles läbi Reacti komponendipuu, mis portaali sisaldab.

See võib mõnikord põhjustada ootamatut käitumist, kui te ei ole ettevaatlik. Näiteks kui teil on sündmuste käsitleja vanemkomponendil, mis peaks käivituma ainult selle komponendi sees toimuvate sündmuste puhul, võib see käivituda ka portaali sees toimuvate sündmuste puhul.

Nende probleemide vältimiseks võite kasutada sündmuse objektil meetodit `stopPropagation()`, et vältida sündmuse edasist mullitamist. Alternatiivina võite kasutada Reacti sünteetilisi sündmusi ja tingimuslikku renderdamist, et kontrollida, millal sündmuste käsitlejad käivitatakse.

Siin on näide `stopPropagation()` kasutamisest, et vältida sündmuse mullitamist vanemkomponendini:

            function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Klõpsati portaali sees!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>See sisu renderdatakse portaalis.</div>,
    document.getElementById('portal-root')
  );
}

            

              
                Copy
              
            
          

Selles näites käivitab portaali sees olevale sisule klõpsamine `handleClick` funktsiooni, kuid sündmus ei mullita üles ühegi vanemkomponendini.

Reacti portaalide kasutamise parimad praktikad

Siin on mõned parimad praktikad, mida Reacti portaalidega töötades meeles pidada:

• Kasutage spetsiaalset DOM-sõlme: Looge oma portaalidele spetsiaalne DOM-sõlm, näiteks `modal-root` või `tooltip-root`. See muudab portaali sisu positsioneerimise ja stiilimise haldamise lihtsamaks.
• Käsitlege sündmusi hoolikalt: Olge teadlik, kuidas sündmused portaalide kasutamisel läbi DOM-puu ja Reacti komponendipuu mullitavad. Ootamatu käitumise vältimiseks kasutage `stopPropagation()` või tingimuslikku renderdamist.
• Hallake fookust: Modaalakende või dialoogide renderdamisel veenduge, et fookus oleks korralikult hallatud. Paigutage fookus kohe modaalakna sisse, kui see avaneb, ja tagastage fookus varem fookuses olnud elemendile, kui modaalaken sulgub. See parandab klaviatuuri- ja ekraanilugeja kasutajate juurdepääsetavust.
• Puhastage DOM: Kui portaali kasutav komponent eemaldatakse (unmounts), veenduge, et puhastate kõik spetsiaalselt portaali jaoks loodud DOM-sõlmed. See hoiab ära mälulekked ja tagab, et DOM jääb puhtaks.
• Arvestage jõudlusega: Kuigi portaalid on üldiselt jõudsad, võib suure hulga sisu renderdamine portaali potentsiaalselt jõudlust mõjutada. Olge teadlik portaalis renderdatava sisu suurusest ja keerukusest.

Alternatiivid Reacti portaalidele

Kuigi Reacti portaalid on võimas tööriist, on sarnaste tulemuste saavutamiseks ka alternatiivseid lähenemisviise. Mõned levinud alternatiivid on järgmised:

• Absoluutne positsioneerimine ja Z-indeks: Saate kasutada CSS-i absoluutset positsioneerimist ja z-indeksit, et paigutada elemente teise sisu peale. See lähenemisviis võib aga olla keerulisem ja altim CSS-konfliktidele.
• Context API: Reacti Context API-d saab kasutada andmete ja oleku jagamiseks komponentide vahel, mis võimaldab teil kontrollida teatud elementide renderdamist vastavalt rakenduse olekule.
• Kolmandate osapoolte teegid: On olemas arvukalt kolmandate osapoolte teeke, mis pakuvad valmiskomponente modaalakende, tööriistavihjete ja muude levinud kasutajaliidese mustrite jaoks. Need teegid kasutavad sageli sisemiselt portaale või pakuvad alternatiivseid mehhanisme sisu renderdamiseks väljaspool komponendipuud.

Globaalsed kaalutlused

Globaalsele sihtrühmale rakenduste arendamisel on oluline arvestada selliste teguritega nagu lokaliseerimine, juurdepääsetavus ja kultuurilised erinevused. Reacti portaalid võivad nende kaalutluste käsitlemisel rolli mängida:

• Lokaliseerimine (i18n): Teksti kuvamisel erinevates keeltes võib olla vaja elementide paigutust ja positsioneerimist kohandada. Portaale saab kasutada keelespetsiifiliste kasutajaliidese elementide renderdamiseks väljaspool peamist komponendipuud, mis võimaldab paigutuse paindlikumat kohandamist erinevatele keeltele. Näiteks paremalt vasakule (RTL) keeled nagu araabia või heebrea keel võivad nõuda tööriistavihjete või modaalakende sulgemisnuppude erinevat paigutust.
• Juurdepääsetavus (a11y): Nagu varem mainitud, võivad portaalid parandada juurdepääsetavust, võimaldades teil kontrollida elementide fookusjärjekorda ja DOM-struktuuri. See on eriti oluline puuetega kasutajatele, kes toetuvad abitehnoloogiatele, näiteks ekraanilugejatele. Veenduge, et teie portaalipõhised kasutajaliidese elemendid on korralikult märgistatud ja klaviatuuriga navigeerimine on intuitiivne.
• Kultuurilised erinevused: Arvestage kultuuriliste erinevustega kasutajaliidese disainis ja kasutajate ootustes. Näiteks võib modaalakende või tööriistavihjete paigutust ja välimust olla vaja kohandada vastavalt kultuurinormidele. Mõnes kultuuris võib olla sobivam kuvada modaalaknad täisekraani katetena, samas kui teistes eelistatakse väiksemat ja vähem pealetükkivat modaalakent.
• Ajavööndid ja kuupäevavormingud: Kuupäevade ja kellaaegade kuvamisel modaalakendes või tööriistavihjetes veenduge, et kasutate kasutaja asukohale vastavat ajavööndit ja kuupäevavormingut. Teegid nagu Moment.js või date-fns võivad olla abiks ajavööndite teisendamisel ja kuupäevade vormindamisel.
• Valuutavormingud: Kui teie rakendus kuvab hindu või muid rahalisi väärtusi, kasutage kasutaja piirkonnale vastavat valuutasümbolit ja -vormingut. Numbrite vormindamiseks vastavalt kasutaja lokaadile saab kasutada `Intl.NumberFormat` API-d.

Neid globaalseid kaalutlusi arvesse võttes saate luua kaasavamaid ja kasutajasõbralikumaid rakendusi mitmekesisele sihtrühmale.

Kokkuvõte

Reacti portaalid on võimas ja mitmekülgne tööriist sisu renderdamiseks väljaspool standardset komponendipuud. Need pakuvad puhast ja elegantset lahendust levinud kasutajaliidese mustritele nagu modaalaknad, tööriistavihjed ja hüpikaknad. Mõistes, kuidas portaalid töötavad ja järgides parimaid praktikaid, saate luua paindlikumaid, hooldatavamaid ja juurdepääsetavamaid Reacti rakendusi.

Katsetage portaalidega oma projektides ja avastage mitmeid viise, kuidas need saavad teie kasutajaliidese arendustöövoogu lihtsustada. Pidage meeles arvestada sündmuste käsitlemise, juurdepääsetavuse ja globaalsete kaalutlustega, kui kasutate portaale tootmisrakendustes.

Reacti portaalide valdamisega saate viia oma Reacti oskused järgmisele tasemele ja luua keerukamaid ning kasutajasõbralikumaid veebirakendusi globaalsele sihtrühmale.