React Portali: Prikazovanje vsebine zunaj drevesa komponent

React portali zagotavljajo zmogljiv mehanizem za prikazovanje podrejenih komponent v DOM vozlišču, ki obstaja zunaj DOM hierarhije nadrejene komponente. Ta tehnika je neprecenljiva v različnih scenarijih, kot so modalna okna, namigi in situacije, kjer potrebujete natančen nadzor nad pozicioniranjem in vrstnim redom nalaganja elementov na strani.

Kaj so React Portali?

V tipični React aplikaciji so komponente prikazane znotraj stroge hierarhične strukture. Nadrejena komponenta vsebuje podrejene komponente in tako naprej. Vendar pa se včasih morate osvoboditi te strukture. Tu nastopijo React portali. Portal vam omogoča, da vsebino komponente prikažete v drugem delu DOM-a, tudi če ta del ni neposredni potomec komponente v drevesu Reacta.

Predstavljajte si, da imate modalno komponento, ki mora biti prikazana na najvišji ravni vaše aplikacije, ne glede na to, kje v drevesu komponent je upodobljena. Brez portalov bi to morda poskušali doseči z absolutnim pozicioniranjem in z-indexom, kar lahko vodi do zapletenih težav s stilom in morebitnih konfliktov. S portali lahko vsebino modalnega okna neposredno upodobite v določenem DOM vozlišču, kot je namenski element "modal-root", s čimer zagotovite, da je vedno upodobljeno na pravilni ravni.

Zakaj uporabljati React Portale?

React Portali rešujejo več pogostih izzivov pri spletnem razvoju:

• Modalna okna in pogovorna okna: Portali so idealna rešitev za prikazovanje modalnih in pogovornih oken, saj zagotavljajo, da se pojavijo nad vso drugo vsebino, ne da bi bili omejeni s stilom in postavitvijo svojih nadrejenih komponent.
• Namigi in pojavna okna: Podobno kot modalna okna, morajo biti tudi namigi in pojavna okna pogosto absolutno pozicionirani glede na določen element, ne glede na njegov položaj v drevesu komponent. Portali poenostavijo ta postopek.
• Izogibanje CSS konfliktom: Pri delu s kompleksnimi postavitvami in gnezdenimi komponentami lahko pride do CSS konfliktov zaradi podedovanih stilov. Portali vam omogočajo, da izolirate stil določenih komponent tako, da jih upodobite zunaj DOM hierarhije nadrejenega elementa.
• Izboljšana dostopnost: Portali lahko izboljšajo dostopnost, saj omogočajo nadzor nad vrstnim redom fokusa in DOM strukturo elementov, ki so vizualno postavljeni drugje na strani. Na primer, ko se odpre modalno okno, lahko zagotovite, da se fokus takoj postavi znotraj modalnega okna, kar izboljša uporabniško izkušnjo za uporabnike tipkovnice in bralnikov zaslona.
• Integracije s tretjimi osebami: Pri integraciji s knjižnicami ali komponentami tretjih oseb, ki imajo specifične zahteve glede DOM-a, so lahko portali uporabni za upodabljanje vsebine v zahtevani DOM strukturi brez spreminjanja izvorne kode knjižnice. Pomislite na integracije z zemljevidi, kot sta Leaflet ali Google Maps, ki pogosto zahtevajo specifične DOM strukture.

Kako implementirati React Portale?

Uporaba React Portalov je preprosta. Tukaj je vodnik po korakih:

1. Ustvarite DOM vozlišče: Najprej ustvarite DOM vozlišče, kamor želite upodobiti vsebino portala. To se običajno naredi v vaši datoteki `index.html`. Na primer:

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

2. Uporabite `ReactDOM.createPortal()`: V vaši React komponenti uporabite metodo `ReactDOM.createPortal()`, da upodobite vsebino v ustvarjeno DOM vozlišče. Ta metoda sprejme dva argumenta: React vozlišče (vsebina, ki jo želite upodobiti) in DOM vozlišče, kamor jo želite upodobiti.

               import ReactDOM from 'react-dom';
   
   function MyComponent() {
     return ReactDOM.createPortal(
       <div>Ta vsebina je upodobljena v modal-root!</div>,
       document.getElementById('modal-root')
     );
   }
   
   export default MyComponent;
               
   
                 
                   Copy
                 
               
             

3. Upodobite komponento: Komponento, ki vsebuje portal, upodobite kot katero koli drugo React komponento.

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

V tem primeru bo vsebina znotraj komponente `MyComponent` upodobljena znotraj elementa `modal-root`, čeprav je `MyComponent` upodobljen znotraj komponente `App`.

Primer: Ustvarjanje modalne komponente z React Portali

Ustvarimo celotno modalno komponento z uporabo React Portalov. Ta primer vključuje osnovno stiliziranje in funkcionalnost za odpiranje in zapiranje modalnega okna.

            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}>Zapri</button>
      </div>
    </div>,
    modalRoot
  );
}

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

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

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

  return (
    <div>
      <h1>Moja aplikacija</h1>
      <button onClick={handleOpenModal}>Odpri modalno okno</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Vsebina modalnega okna</h2>
          <p>To je vsebina modalnega okna.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

V tem primeru:

• Ustvarimo komponento `Modal`, ki uporablja `ReactDOM.createPortal()` za upodobitev svoje vsebine v element `modal-root`.
• Komponenta `Modal` prejme `children` kot prop, kar vam omogoča, da posredujete poljubno vsebino, ki jo želite prikazati v modalnem oknu.
• Prop `onClose` je funkcija, ki se pokliče, ko se modalno okno zapre.
• Komponenta `App` upravlja stanje modalnega okna (ali je odprto ali zaprto) in pogojno upodablja komponento `Modal`.

Dodati bi morali tudi nekaj CSS stilov razredom `modal-overlay` in `modal`, da bi modalno okno pravilno pozicionirali na zaslonu. Na primer:

            .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
              
            
          

Upravljanje dogodkov s portali

Pomemben vidik pri uporabi portalov je, kako se upravljajo dogodki. Mehurčkanje dogodkov (event bubbling) deluje pri portalih drugače kot pri standardnih React komponentah.

Ko se dogodek sproži znotraj portala, se bo kot običajno širil navzgor po drevesu DOM. Vendar pa sistem dogodkov v Reactu obravnava portal kot običajno React vozlišče, kar pomeni, da se bodo dogodki širili tudi navzgor po drevesu komponent Reacta, ki vsebuje portal.

Če niste previdni, lahko to včasih povzroči nepričakovano obnašanje. Če imate na primer na nadrejeni komponenti obravnavo dogodka, ki bi se morala sprožiti samo ob dogodkih znotraj te komponente, se lahko sproži tudi ob dogodkih znotraj portala.

Da bi se izognili tem težavam, lahko uporabite metodo `stopPropagation()` na objektu dogodka, da preprečite nadaljnje širjenje dogodka navzgor. Alternativno lahko uporabite sintetične dogodke Reacta in pogojno upodabljanje za nadzor nad tem, kdaj se sprožijo obravnave dogodkov.

Tukaj je primer uporabe `stopPropagation()`, da preprečite širjenje dogodka navzgor do nadrejene komponente:

            function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Kliknjeno znotraj portala!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Ta vsebina je upodobljena v portalu.</div>,
    document.getElementById('portal-root')
  );
}

            

              
                Copy
              
            
          

V tem primeru bo klik na vsebino znotraj portala sprožil funkcijo `handleClick`, vendar se dogodek ne bo razširil navzgor do nobenih nadrejenih komponent.

Najboljše prakse za uporabo React Portalov

Tukaj je nekaj najboljših praks, ki jih je dobro upoštevati pri delu z React Portali:

• Uporabite namensko DOM vozlišče: Ustvarite namensko DOM vozlišče za vaše portale, kot sta `modal-root` ali `tooltip-root`. To olajša upravljanje pozicioniranja in stiliranja vsebine portala.
• Previdno upravljajte dogodke: Zavedajte se, kako se dogodki širijo navzgor po drevesu DOM in drevesu komponent Reacta pri uporabi portalov. Uporabite `stopPropagation()` ali pogojno upodabljanje, da preprečite nepričakovano obnašanje.
• Upravljajte fokus: Pri prikazovanju modalnih ali pogovornih oken zagotovite, da je fokus pravilno upravljan. Takoj postavite fokus znotraj modalnega okna, ko se odpre, in vrnite fokus na predhodno fokusiran element, ko se modalno okno zapre. To izboljša dostopnost za uporabnike tipkovnice in bralnikov zaslona.
• Počistite DOM: Ko se komponenta, ki uporablja portal, odstrani, zagotovite, da počistite vsa DOM vozlišča, ki so bila ustvarjena posebej za portal. To preprečuje uhajanje pomnilnika in zagotavlja, da DOM ostane čist.
• Upoštevajte zmogljivost: Čeprav so portali na splošno zmogljivi, lahko upodabljanje velike količine vsebine v portal potencialno vpliva na zmogljivost. Bodite pozorni na velikost in kompleksnost vsebine, ki jo upodabljate v portalu.

Alternative React Portalom

Čeprav so React Portali zmogljivo orodje, obstajajo alternativni pristopi, s katerimi lahko dosežete podobne rezultate. Nekatere pogoste alternative vključujejo:

• Absolutno pozicioniranje in Z-Index: Uporabite lahko absolutno pozicioniranje CSS in z-index za postavitev elementov nad drugo vsebino. Vendar pa je ta pristop lahko bolj zapleten in nagnjen k CSS konfliktom.
• Context API: Reactov Context API se lahko uporablja za deljenje podatkov in stanja med komponentami, kar vam omogoča nadzor nad upodabljanjem določenih elementov glede na stanje aplikacije.
• Knjižnice tretjih oseb: Obstajajo številne knjižnice tretjih oseb, ki ponujajo vnaprej pripravljene komponente za modalna okna, namige in druge pogoste UI vzorce. Te knjižnice pogosto interno uporabljajo portale ali ponujajo alternativne mehanizme za upodabljanje vsebine zunaj drevesa komponent.

Izbira pristopa je odvisna od specifičnih zahtev vaše aplikacije in kompleksnosti UI elementov, ki jih poskušate ustvariti. Portali so na splošno najboljša možnost, ko potrebujete natančen nadzor nad pozicioniranjem in vrstnim redom nalaganja elementov ter se želite izogniti CSS konfliktom.

Globalni vidiki

Pri razvoju aplikacij za globalno občinstvo je bistveno upoštevati dejavnike, kot so lokalizacija, dostopnost in kulturne razlike. React Portali lahko igrajo vlogo pri obravnavanju teh vidikov:

• Lokalizacija (i18n): Pri prikazu besedila v različnih jezikih bo morda treba prilagoditi postavitev in pozicioniranje elementov. Portali se lahko uporabljajo za upodabljanje jezikovno specifičnih UI elementov zunaj glavnega drevesa komponent, kar omogoča večjo prilagodljivost pri prilagajanju postavitve različnim jezikom. Na primer, jeziki, ki se pišejo od desne proti levi (RTL), kot sta arabščina ali hebrejščina, lahko zahtevajo drugačno pozicioniranje namigov ali gumbov za zapiranje modalnih oken.
• Dostopnost (a11y): Kot smo že omenili, lahko portali izboljšajo dostopnost, saj omogočajo nadzor nad vrstnim redom fokusa in DOM strukturo elementov. To je še posebej pomembno za uporabnike z oviranostmi, ki se zanašajo na podporne tehnologije, kot so bralniki zaslona. Zagotovite, da so vaši UI elementi, ki temeljijo na portalih, pravilno označeni in da je navigacija s tipkovnico intuitivna.
• Kulturne razlike: Upoštevajte kulturne razlike pri oblikovanju uporabniškega vmesnika in pričakovanjih uporabnikov. Na primer, postavitev in videz modalnih oken ali namigov bo morda treba prilagoditi glede na kulturne norme. V nekaterih kulturah je morda primerneje prikazati modalna okna kot celozaslonske prekrivke, medtem ko je v drugih morda bolj zaželeno manjše, manj vsiljivo modalno okno.
• Časovni pasovi in formati datumov: Pri prikazu datumov in časov v modalnih oknih ali namigih zagotovite, da uporabljate ustrezen časovni pas in format datuma za lokacijo uporabnika. Knjižnice, kot sta Moment.js ali date-fns, so lahko v pomoč pri obravnavi pretvorb časovnih pasov in oblikovanju datumov.
• Formati valut: Če vaša aplikacija prikazuje cene ali druge denarne vrednosti, uporabite pravilen simbol valute in format za regijo uporabnika. API `Intl.NumberFormat` se lahko uporablja za oblikovanje številk v skladu z lokalnimi nastavitvami uporabnika.

Z upoštevanjem teh globalnih vidikov lahko ustvarite bolj vključujoče in uporabniku prijazne aplikacije za raznoliko občinstvo.

Zaključek

React Portali so zmogljivo in vsestransko orodje za upodabljanje vsebine zunaj standardnega drevesa komponent. Ponujajo čisto in elegantno rešitev za pogoste UI vzorce, kot so modalna okna, namigi in pojavna okna. Z razumevanjem delovanja portalov in upoštevanjem najboljših praks lahko ustvarite bolj prilagodljive, vzdrževane in dostopne React aplikacije.

Eksperimentirajte s portali v svojih projektih in odkrijte številne načine, kako lahko poenostavijo vaš potek dela pri razvoju uporabniškega vmesnika. Ne pozabite upoštevati obravnave dogodkov, dostopnosti in globalnih vidikov pri uporabi portalov v produkcijskih aplikacijah.

Z obvladovanjem React Portalov lahko svoje znanje Reacta dvignete na višjo raven in gradite bolj sofisticirane in uporabniku prijazne spletne aplikacije za globalno občinstvo.