Reacti Portaalide Mustrid: Modaali ja Kattekihi Rakendamise Strateegiad

Reacti Portaalid pakuvad võimsat viisi renderdada laps-elemente DOM-sõlme, mis asub väljaspool vanem-komponendi DOM-hierarhiat. See võimekus on eriti kasulik modaalide, kattekihtide, vihjete ja muude kasutajaliidese elementide loomiseks, mis peavad vabanema oma vanem-konteinerite piirangutest. See põhjalik juhend süveneb parimatesse praktikatesse, edasijõudnud tehnikatesse ja levinumatesse lõksudesse, mis on seotud Reacti Portaalide kasutamisega ligipääsetavate ja jõudlusele optimeeritud modaalide ning kattekihtide loomisel globaalsele publikule.

Mis on Reacti Portaalid?

Tüüpilistes Reacti rakendustes renderdatakse komponendid nende vanem-komponentide DOM-puu sisse. Siiski on stsenaariume, kus see vaikekäitumine ei ole soovitav. Näiteks võib modaaldialoogi piirata selle vanema ülevoolu (overflow) või virnastamiskontekst (stacking context), mis viib ootamatute visuaalsete tõrgete või piiratud positsioneerimisvõimalusteni. Reacti Portaalid pakuvad lahendust, võimaldades komponendil renderdada oma laps-elemendid teise DOM-i ossa, põgenedes tõhusalt oma vanema piiridest.

Põhimõtteliselt on Reacti Portaal viis renderdada komponendi laps-elemente (mis võivad olla mis tahes Reacti sõlmed, sealhulgas teised komponendid) teise DOM-sõlme, väljaspool praegust DOM-hierarhiat. See saavutatakse funktsiooniga ReactDOM.createPortal(child, container). Argument child on Reacti element, mida soovite renderdada, ja argument container on DOM-element, kuhu soovite selle renderdada.

Põhisüntaks

Siin on lihtne näide, kuidas kasutada ReactDOM.createPortal:

            import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>See sisu renderdatakse vanemast väljapoole!</div>,
    document.getElementById('portal-root') // Asenda oma konteineriga
  );
}

            

              
                Copy
              
            
          

Selles näites renderdatakse MyComponent-i sisu DOM-sõlme, mille ID on 'portal-root', olenemata sellest, kus MyComponent asub Reacti komponendipuus.

Miks kasutada Reacti Portaale Modaali ja Kattekihi jaoks?

Reacti Portaalide kasutamine modaalide ja kattekihtide jaoks pakub mitmeid olulisi eeliseid:

• CSS-i konfliktide vältimine: Modaale ja kattekihte on sageli vaja positsioneerida rakenduse ülemisel tasemel, mis võib potentsiaalselt sattuda konflikti vanem-komponentides määratletud stiilidega. Portaalid võimaldavad teil neid elemente renderdada väljaspool vanema ulatust, minimeerides CSS-i konflikte ja tagades ühtlase stiili. Kujutage ette ülemaailmset e-kaubanduse platvormi, kus iga müüja toodete ja modaalide stiilid ei tohiks omavahel kokku põrgata. Portaalid aitavad seda isolatsiooni saavutada.
• Parem virnastamiskontekst: Modaalid nõuavad sageli kõrget z-index-it, et tagada nende ilmumine teiste elementide peal. Kui modaal renderdatakse madalama virnastamiskontekstiga vanema sees, ei pruugi z-index ootuspäraselt toimida. Portaalid väldivad seda probleemi, renderdades modaali otse body elemendi alla (või mõnda teise sobivasse ülemise taseme konteinerisse), tagades soovitud virnastamisjärjekorra.
• Täiustatud ligipääsetavus: Kui modaal on avatud, soovite tavaliselt fookuse lukustada modaali sisse, et tagada klaviatuuri kasutajate navigeerimine ainult modaali sisu piires. Portaalid muudavad fookuse haldamise lihtsamaks, kuna modaal renderdatakse DOM-i ülemisel tasemel, lihtsustades fookuse haldamise loogika rakendamist. See on äärmiselt oluline rahvusvaheliste ligipääsetavusjuhiste, nagu WCAG, käsitlemisel.
• Puhas komponendi struktuur: Portaalid aitavad hoida teie Reacti komponendi struktuuri puhta ja hooldatavana. Modaali või kattekihi visuaalne esitlus on sageli loogiliselt eraldiseisev komponendist, mis selle käivitab. Portaalid võimaldavad teil seda eraldatust oma koodibaasis esindada.

Modaalide Rakendamine Reacti Portaalidega: Samm-sammuline Juhend

Vaatame läbi praktilise näite modaali komponendi rakendamisest Reacti Portaalide abil.

Samm 1: Loo portaali konteiner

Esiteks vajate DOM-elementi, kuhu modaali sisu renderdatakse. See on sageli div-element, mis asetatakse otse body-sildi sisse teie index.html failis:

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

            

              
                Copy
              
            
          

Samm 2: Loo modaali komponent

Nüüd looge Modal-komponent, mis kasutab ReactDOM.createPortal, et renderdada oma laps-elemendid modal-root konteinerisse:

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

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

function Modal({ children, isOpen, onClose }) {
  const elRef = useRef(null);

  if (!elRef.current) {
    elRef.current = document.createElement('div');
  }

  useEffect(() => {
    if (isOpen) {
        modalRoot.appendChild(elRef.current);
        // Korista ära, kui komponent eemaldatakse
        return () => modalRoot.removeChild(elRef.current);
    }

    // Korista ära, kui modaal suletakse ja eemaldatakse
    if (elRef.current && modalRoot.contains(elRef.current)) {
      modalRoot.removeChild(elRef.current);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose} style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{backgroundColor: 'white', padding: '20px', borderRadius: '5px'}}>
            {children}
            <button onClick={onClose}>Sulge</button>
        </div>
    </div>,
    elRef.current // Kasutades elRef-i dünaamiliseks lisamiseks ja eemaldamiseks
  );
}

export default Modal;

            

              
                Copy
              
            
          

See komponent võtab vastu children-i prop'ina, mis esindab sisu, mida soovite modaali sees kuvada. See võtab ka vastu isOpen (boolean, mis näitab, kas modaal peaks olema nähtav) ja onClose (funktsioon modaali sulgemiseks).

Olulised kaalutlused selles rakenduses:

• Dünaamiline elemendi loomine: elRef ja useEffect hook'i kasutatakse portaali konteineri dünaamiliseks loomiseks ja lisamiseks modal-root-i. See tagab, et portaali konteiner on DOM-is ainult siis, kui modaal on avatud. See on ka vajalik, kuna ReactDOM.createPortal eeldab, et DOM-element on juba olemas.
• Tingimuslik renderdamine: isOpen prop'i kasutatakse modaali tingimuslikuks renderdamiseks. Kui isOpen on false, tagastab komponent null.
• Kattekihi ja sisu stiilimine: Komponent sisaldab põhilist stiili modaali kattekihi ja sisu jaoks. Saate neid stiile kohandada vastavalt oma rakenduse disainile. Pange tähele, et selles näites on lihtsuse huvides kasutatud inline-stiile, kuid reaalses rakenduses kasutaksite tõenäoliselt CSS-klasse või CSS-in-JS lahendust.
• Sündmuse levimine: onClick={(e) => e.stopPropagation()} modal-content-il takistab klõpsusündmuse levimist modal-overlay-le, mis sulgeks modaali tahtmatult.
• Koristamine: useEffect hook sisaldab puhastusfunktsiooni, mis eemaldab dünaamiliselt loodud elemendi DOM-ist, kui komponent eemaldatakse või kui isOpen muutub väärtuseks false. See on oluline mälulekete vältimiseks ja DOM-i puhtana hoidmiseks.

Samm 3: Modaali komponendi kasutamine

Nüüd saate Modal-komponenti oma rakenduses kasutada:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Ava modaal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modaali Sisu</h2>
        <p>See on modaali sisu.</p>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Selles näites käivitab nupp modaali avamise. Modal-komponent saab isOpen ja onClose prop'id, et kontrollida selle nähtavust.

Kattekihtide Rakendamine Reacti Portaalidega

Kihid, mida sageli kasutatakse laadimisindikaatorite, taust-efektide või teavitusribade jaoks, võivad samuti Reacti Portaalidest kasu saada. Rakendamine on väga sarnane modaalidele, kuid mõningate väikeste muudatustega, et sobida konkreetse kasutusjuhuga.

Näide: Laadimise Kattekiht

Loome lihtsa laadimise kattekihi, mis katab terve ekraani andmete laadimise ajal.

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

const overlayRoot = document.getElementById('overlay-root');

function LoadingOverlay({ isLoading, children }) {
  const elRef = useRef(null);

    if (!elRef.current) {
        elRef.current = document.createElement('div');
    }

    useEffect(() => {
        if (isLoading) {
            overlayRoot.appendChild(elRef.current);
            return () => overlayRoot.removeChild(elRef.current);
        }

        if (elRef.current && overlayRoot.contains(elRef.current)) {
            overlayRoot.removeChild(elRef.current);
        }
    }, [isLoading]);

  if (!isLoading) return null;

  return ReactDOM.createPortal(
    <div className="loading-overlay" style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.3)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999}}>
      {children}
    </div>,
    elRef.current
  );
}

export default LoadingOverlay;

            

              
                Copy
              
            
          

See LoadingOverlay-komponent võtab vastu isLoading prop'i, mis määrab, kas kattekiht on nähtav. Kui isLoading on true, katab kattekiht terve ekraani poolläbipaistva taustaga.

Komponendi kasutamiseks:

            import React, { useState, useEffect } from 'react';
import LoadingOverlay from './LoadingOverlay';

function App() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simuleerime andmete laadimist
    setTimeout(() => {
      setData({ message: 'Andmed laetud!' });
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <LoadingOverlay isLoading={isLoading}>
        <p>Laen...</p>
      </LoadingOverlay>

      {data ? <p>{data.message}</p> : <p>Laen andmeid...</p>}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Edasijõudnud Portaali Tehnikad

1. Dünaamilised Portaali Konteinerid

Selle asemel, et kõvakodeerida modal-root või overlay-root ID-sid, saate portaali konteineri dünaamiliselt luua komponendi mountimisel. See lähenemine on kasulik, kui vajate rohkem kontrolli konteineri atribuutide või paigutuse üle DOM-is. Ülaltoodud näited kasutavad juba seda lähenemist.

2. Konteksti Pakkujad Portaali sihtmärkide jaoks

Keerukamate rakenduste puhul võite soovida pakkuda konteksti, et määrata portaali sihtmärk dünaamiliselt. See võimaldab vältida siht-elemendi prop'ina edastamist igale komponendile, mis kasutab portaali. Näiteks võiksite luua PortalProvider-i, mis teeb modal-root-elemendi kättesaadavaks kõigile selle ulatuse komponentidele.

            import React, { createContext, useContext, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContext = createContext(null);

function PortalProvider({ children }) {
  const portalRef = useRef(document.createElement('div'));

  useEffect(() => {
    const portalNode = portalRef.current;
    portalNode.id = 'portal-root';
    document.body.appendChild(portalNode);
    return () => {
      document.body.removeChild(portalNode);
    };
  }, []);

  return (
    <PortalContext.Provider value={portalRef.current}>
      {children}
    </PortalContext.Provider>
  );
}

function usePortal() {
  const portalNode = useContext(PortalContext);
  if (!portalNode) {
    throw new Error('usePortal must be used within a PortalProvider');
  }
  return portalNode;
}

function Portal({ children }) {
  const portalNode = usePortal();
  return ReactDOM.createPortal(children, portalNode);
}

export { PortalProvider, Portal };

            

              
                Copy
              
            
          

Kasutamine:

            import { PortalProvider, Portal } from './PortalContext';

function App() {
  return (
    <PortalProvider>
      <div>
        <p>Mingi sisu</p>
        <Portal>
          <div style={{ backgroundColor: 'red', padding: '10px' }}>
            See renderdatakse portaalis!
          </div>
        </Portal>
      </div>
    </PortalProvider>
  );
}

            

              
                Copy
              
            
          

3. Serveripoolse Renderdamise (SSR) Kaalutlused

Kui kasutate Reacti Portaale serveripoolselt renderdatud rakendustes, peate tagama, et portaali konteiner on DOM-is olemas enne, kui komponent üritab renderdada. SSR-i ajal pole document-objekt saadaval, seega ei saa te otse ligi pääseda document.getElementById-ile. Üks lähenemine on renderdada portaali sisu tingimuslikult ainult kliendi poolel pärast komponendi mountimist. Teine lähenemine on luua portaali konteiner serveripoolselt renderdatud HTML-i sisse ja tagada, et see on saadaval, kui Reacti komponent kliendi poolel hüdreerub.

Ligipääsetavuse Kaalutlused

Modaalide ja kattekihtide rakendamisel on ligipääsetavus ülimalt oluline, et tagada hea kogemus kõigile kasutajatele, eriti puuetega inimestele. Siin on mõned olulised ligipääsetavuse kaalutlused:

• Fookuse haldamine: Nagu varem mainitud, on fookuse lukustamine modaali ligipääsetavuse jaoks ülioluline. Kui modaal avaneb, peaks fookus automaatselt liikuma esimesele fookustatavale elemendile modaali sees. Kui modaal sulgub, peaks fookus tagasi minema elemendile, mis modaali käivitas. Teegid nagu focus-trap-react aitavad fookuse haldamist lihtsustada.
• ARIA atribuudid: Kasutage ARIA atribuute, et anda semantilist teavet modaali rolli ja oleku kohta. Näiteks kasutage modaali konteineril role="dialog" või role="alertdialog", et näidata selle eesmärki. Kasutage aria-modal="true", et näidata, et modaal on modaalne (st see takistab interaktsiooni ülejäänud lehega).
• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid modaali sees on klaviatuuriga ligipääsetavad. Kasutajad peaksid saama navigeerida läbi modaali sisu Tab-klahvi abil ja suhelda elementidega Enter- või tühikuklahvi abil.
• Ekraanilugeja ühilduvus: Testige oma modaali ekraanilugejaga, et tagada, et see on korralikult teatavaks tehtud ja sisu on ligipääsetav. Pakkuge kirjeldavaid silte ja alternatiivset teksti kõigile piltidele ja interaktiivsetele elementidele.
• Kontrastsus ja värv: Tagage piisav kontrastsus teksti ja taustavärvide vahel, et vastata ligipääsetavusjuhistele. Arvestage nägemispuudega kasutajatega, kes võivad tugineda ekraanisuurendusele või kõrge kontrastsusega seadetele.

Jõudluse Optimeerimine

Kuigi Reacti Portaalid ise ei põhjusta jõudlusprobleeme, võivad halvasti rakendatud modaalid ja kattekihid rakenduse jõudlust mõjutada. Siin on mõned näpunäited jõudluse optimeerimiseks:

• Vajaduspõhine laadimine (Lazy Loading): Kui modaali sisu on keeruline või sisaldab palju pilte, kaaluge sisu laadimist vajaduspõhiselt, et parandada lehe esialgset laadimisaega.
• Memoization: Kasutage React.memo, et vältida modaali komponendi ja selle laste tarbetuid uuesti renderdamisi.
• Virtualiseerimine: Kui modaal sisaldab suurt nimekirja elementidest, kasutage virtualiseerimisteeki nagu react-window või react-virtualized, et renderdada ainult nähtavaid elemente.
• Debouncing ja Throttling: Kui modaali käitumine käivitub sagedaste sündmuste (nt akna suuruse muutmine) toimel, kasutage debouncing'ut või throttling'ut, et piirata värskenduste arvu.
• CSS üleminekud ja animatsioonid: Kasutage JavaScripti-põhiste animatsioonide asemel CSS-üleminekuid ja -animatsioone sujuvama jõudluse tagamiseks.

Levinumad Lõksud ja Kuidas Neid Vältida

• Koristamise unustamine: Koristage alati portaali konteiner, kui komponent eemaldatakse, et vältida mälulekkeid ja DOM-i reostust. useEffect hook võimaldab lihtsat koristamist.
• Vale virnastamiskontekst: Kontrollige hoolikalt portaali konteineri ja selle vanem-elementide z-index-it, et tagada modaali või kattekihi ilmumine teiste elementide peal.
• Ligipääsetavuse probleemid: Ligipääsetavuse eiramine võib viia halva kasutajakogemuseni puuetega kasutajatele. Järgige alati ligipääsetavusjuhiseid ja testige oma modaale abitehnoloogiatega.
• CSS-i konfliktid: Olge teadlik CSS-i konfliktidest portaali sisu ja ülejäänud rakenduse vahel. Kasutage CSS-mooduleid, styled-components'e või CSS-in-JS lahendust stiilide isoleerimiseks.
• Sündmuste käsitlemise probleemid: Veenduge, et sündmuste käsitlejad portaali sisu sees on korralikult seotud ja et sündmused ei leviks tahtmatult teistesse rakenduse osadesse.

Alternatiivid Reacti Portaalidele

Kuigi Reacti Portaalid on sageli parim lahendus modaalide ja kattekihtide jaoks, on olemas ka alternatiivseid lähenemisviise, mida võite kaaluda:

• CSS-põhised lahendused: Mõnel juhul saate soovitud visuaalse efekti saavutada ainult CSS-i abil, ilma Reacti Portaalide vajaduseta. Näiteks saate kasutada position: fixed ja z-index, et positsioneerida modaal rakenduse ülemisel tasemel. Siiski võib see lähenemine olla raskemini hallatav ja põhjustada CSS-i konflikte.
• Kolmandate osapoolte teegid: On palju kolmandate osapoolte Reacti komponenditeeke, mis pakuvad valmis modaali- ja kattekihikomponente. Need teegid võivad säästa aega ja vaeva, kuid ei pruugi alati olla teie konkreetsetele vajadustele kohandatavad.

Kokkuvõte

Reacti Portaalid on võimas tööriist ligipääsetavate ja jõudlusele optimeeritud modaalide ning kattekihtide loomiseks. Mõistes Portaalide eeliseid ja piiranguid ning järgides parimaid praktikaid ligipääsetavuse ja jõudluse osas, saate luua kasutajaliidese komponente, mis parandavad kasutajakogemust ja tõstavad teie Reacti rakenduste üldist kvaliteeti. Alates e-kaubanduse platvormidest erinevate müüjaspetsiifiliste moodulitega kuni keeruliste kasutajaliidese elementidega globaalsete SaaS-rakendusteni – Reacti Portaalide valdamine võimaldab teil luua robustseid ja skaleeritavaid front-end lahendusi.