React createPortal: Portaalien luomisen ja tapahtumankäsittelyn hallinta

Nykyaikaisessa React-verkkokehityksessä on ratkaisevan tärkeää luoda käyttöliittymiä, jotka integroituvat saumattomasti taustalla olevaan dokumenttirakenteeseen. Vaikka Reactin komponenttimalli on erinomainen virtuaalisen DOM:n hallinnassa, joskus meidän on renderöitävä elementtejä normaalin komponenttihierarkian ulkopuolelle. Tässä kohtaa createPortal astuu kuvaan. Tämä opas tutkii createPortalia syvällisesti, käsitellen sen tarkoitusta, käyttöä ja edistyneitä tekniikoita tapahtumien käsittelyyn ja monimutkaisten käyttöliittymäelementtien rakentamiseen. Käsittelemme myös kansainvälistämiseen liittyviä näkökohtia, saavutettavuuden parhaita käytäntöjä ja yleisiä vältettäviä sudenkuoppia.

Mitä on React createPortal?

createPortal on Reactin API, joka antaa sinun renderöidän React-komponentin lapsielementit toiseen osaan DOM-puuta, vanhemman komponentin hierarkian ulkopuolelle. Tämä on erityisen hyödyllistä luotaessa elementtejä kuten modaaleja, työkaluvihjeitä, pudotusvalikkoja ja peittokuvia, jotka on sijoitettava dokumentin ylätasolle tai tiettyyn säiliöön riippumatta siitä, missä ne käynnistävä komponentti sijaitsee Reactin komponenttipuussa.

Ilman createPortalia tämän saavuttaminen vaatii usein monimutkaisia kiertoteitä, kuten DOM:n suoraa manipulointia tai CSS:n absoluuttista paikoitusta, mikä voi johtaa ongelmiin pinoamiskontekstien, z-index-ristiriitojen ja saavutettavuuden kanssa.

Miksi käyttää createPortalia?

Tässä ovat keskeisimmät syyt, miksi createPortal on arvokas työkalu React-arsenaalissasi:

• Parempi DOM-rakenne: Vältetään komponenttien syvälle sisäkkäin asettaminen DOM:ssa, mikä johtaa siistimpään ja hallittavampaan rakenteeseen. Tämä on erityisen tärkeää monimutkaisissa sovelluksissa, joissa on paljon interaktiivisia elementtejä.
• Yksinkertaistettu tyylittely: Elementit on helppo sijoittaa suhteessa näkymäikkunaan tai tiettyihin säiliöihin ilman monimutkaisia CSS-kikkoja. Tämä yksinkertaistaa tyylittelyä ja asettelua, erityisesti käsiteltäessä elementtejä, joiden on oltava muun sisällön päällä.
• Parannettu saavutettavuus: Helpottaa saavutettavien käyttöliittymien luomista sallimalla fokuksen ja näppäimistöllä navigoinnin hallinnan riippumatta komponenttihierarkiasta. Esimerkiksi varmistamalla, että fokus pysyy modaali-ikkunan sisällä.
• Parempi tapahtumankäsittely: Mahdollistaa tapahtumien oikeanlaisen etenemisen portaalin sisällöstä React-puuhun, varmistaen, että vanhempiin komponentteihin liitetyt tapahtumakuuntelijat toimivat edelleen odotetusti.

createPortalin peruskäyttö

createPortal-API hyväksyy kaksi argumenttia:

1. Renderöitävä React-solmu (JSX).
2. DOM-elementti, johon haluat renderöidä solmun. Tämän DOM-elementin tulisi mieluiten olla olemassa ennen kuin createPortalia käyttävä komponentti liitetään.

Tässä on yksinkertainen esimerkki:

Esimerkki: Modaalinen renderöinti

Oletetaan, että sinulla on modaalikomponentti, jonka haluat renderöidä body-elementin loppuun.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

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

export default Modal;

            

              
                Copy
              
            
          

Selitys:

• Tuomme ReactDOM:n, koska createPortal on ReactDOM-olion metodi.
• Oletamme, että HTML-koodissasi on DOM-elementti, jonka ID on modal-root. Tähän paikkaan modaali renderöidään. Varmista, että tämä elementti on olemassa. Yleinen käytäntö on lisätä <div id="modal-root"></div> juuri ennen sulkevaa </body>-tagia index.html-tiedostossasi.
• Käytämme ReactDOM.createPortalia renderöidäksemme modaalin JSX:n modalRoot-elementtiin.
• Käytämme e.stopPropagation()-metodia estääksemme modaalin sisällön onClick-tapahtuman laukaisemasta onClose-käsittelijää peittokuvassa. Tämä varmistaa, että modaalin sisällä klikkaaminen ei sulje sitä.

Käyttö:

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

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Tämä esimerkki osoittaa, kuinka modaali renderöidään normaalin komponenttihierarkian ulkopuolelle, mikä mahdollistaa sen absoluuttisen sijoittelun sivulla. createPortalin käyttö tällä tavalla ratkaisee yleisiä pinoamiskonteksteihin liittyviä ongelmia ja antaa sinun helposti luoda yhtenäistä modaalityyliä koko sovelluksessasi.

Tapahtumankäsittely createPortalilla

Yksi createPortalin keskeisistä eduista on se, että se säilyttää Reactin normaalin tapahtumien kuplimiskäyttäytymisen. Tämä tarkoittaa, että portaalin sisällöstä lähtöisin olevat tapahtumat etenevät edelleen ylöspäin Reactin komponenttipuussa, jolloin vanhemmat komponentit voivat käsitellä niitä.

On kuitenkin tärkeää ymmärtää, miten tapahtumia käsitellään niiden ylittäessä portaalin rajan.

Esimerkki: Tapahtumien käsittely portaalin ulkopuolella

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

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

Selitys:

• Käytämme ref-attribuuttia päästäksemme käsiksi portaalin sisällä renderöityyn pudotusvalikkoelementtiin.
• Liitämme mousedown-tapahtumakuuntelijan document-olioon havaitaksemme klikkaukset pudotusvalikon ulkopuolella.
• Tapahtumakuuntelijan sisällä tarkistamme, tapahtuiko klikkaus pudotusvalikon ulkopuolella käyttämällä dropdownRef.current.contains(event.target).
• Jos klikkaus tapahtui pudotusvalikon ulkopuolella, suljemme sen asettamalla isOpen-arvoksi false.

Tämä esimerkki osoittaa, kuinka käsitellä tapahtumia, jotka tapahtuvat portaalin sisällön ulkopuolella, mikä mahdollistaa interaktiivisten elementtien luomisen, jotka reagoivat käyttäjän toimiin ympäröivässä dokumentissa.

Edistyneet käyttötapaukset

createPortal ei rajoitu vain yksinkertaisiin modaaleihin ja työkaluvihjeisiin. Sitä voidaan käyttää monissa edistyneissä skenaarioissa, mukaan lukien:

• Kontekstivalikot: Renderöi dynaamisesti kontekstivalikoita hiiren kursorin lähelle oikealla napsautuksella.
• Ilmoitukset: Näytä ilmoituksia näytön yläreunassa komponenttihierarkiasta riippumatta.
• Mukautetut ponnahdusikkunat: Luo mukautettuja ponnahdusikkunakomponentteja edistyneellä sijoittelulla ja tyylillä.
• Integraatio kolmannen osapuolen kirjastojen kanssa: Käytä createPortalia React-komponenttien integroimiseksi kolmannen osapuolen kirjastoihin, jotka vaativat tiettyjä DOM-rakenteita.

Esimerkki: Kontekstivalikon luominen

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

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

Selitys:

• Käytämme onContextMenu-tapahtumaa havaitaksemme oikeanpuoleiset napsautukset kohde-elementissä.
• Estämme oletuskontekstivalikon ilmestymisen käyttämällä event.preventDefault().
• Tallennamme hiiren koordinaatit contextMenu-tilamuuttujaan.
• Renderöimme kontekstivalikon portaalin sisälle, sijoitettuna hiiren koordinaatteihin.
• Sisällytämme saman ulkopuolisen klikkauksen tunnistuslogiikan kuin edellisessä esimerkissä sulkeaksemme kontekstivalikon, kun käyttäjä napsauttaa sen ulkopuolella.

Saavutettavuuteen liittyvät näkökohdat

Käytettäessä createPortalia on tärkeää ottaa huomioon saavutettavuus, jotta varmistetaan, että sovellus on kaikkien käytettävissä.

Fokuksen hallinta

Kun portaali avautuu (esim. modaali), sinun tulee varmistaa, että fokus siirretään automaattisesti ensimmäiseen interaktiiviseen elementtiin portaalin sisällä. Tämä auttaa käyttäjiä, jotka navigoivat näppäimistöllä tai ruudunlukijalla, pääsemään helposti käsiksi portaalin sisältöön.

Kun portaali sulkeutuu, sinun tulisi palauttaa fokus elementtiin, joka laukaisi portaalin avautumisen. Tämä ylläpitää johdonmukaista navigointivirtaa.

ARIA-attribuutit

Käytä ARIA-attribuutteja antamaan semanttista tietoa portaalin sisällöstä. Esimerkiksi, käytä aria-modal="true" modaalielementissä osoittamaan, että se on modaalinen dialogi. Käytä aria-labelledby-attribuuttia yhdistääksesi modaalin sen otsikkoon ja aria-describedby-attribuuttia yhdistääksesi sen kuvaukseen.

Näppäimistöllä navigointi

Varmista, että käyttäjät voivat navigoida portaalin sisällössä näppäimistöllä. Käytä tabindex-attribuuttia fokuksen järjestyksen hallintaan ja varmista, että kaikki interaktiiviset elementit ovat saavutettavissa näppäimistöllä.

Harkitse fokuksen vangitsemista portaalin sisään, jotta käyttäjät eivät voi vahingossa navigoida sen ulkopuolelle. Tämä voidaan saavuttaa kuuntelemalla Tab-näppäintä ja siirtämällä fokus ohjelmallisesti ensimmäiseen tai viimeiseen interaktiiviseen elementtiin portaalin sisällä.

Esimerkki: Saavutettava modaali

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

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

Selitys:

• Käytämme ARIA-attribuutteja kuten aria-modal, aria-labelledby ja aria-describedby antamaan semanttista tietoa modaalista.
• Käytämme useEffect-hookia hallitaksemme fokusta, kun modaali avautuu ja sulkeutuu.
• Tallennamme tällä hetkellä fokusoituneen elementin ennen modaalin avaamista ja palautamme fokuksen siihen, kun modaali sulkeutuu.
• Vangitsemme fokuksen modaalin sisälle käyttämällä keydown-tapahtumakuuntelijaa.

Kansainvälistämisen (i18n) näkökohdat

Kehitettäessä sovelluksia globaalille yleisölle kansainvälistäminen (i18n) on kriittinen näkökohta. Kun käytät createPortalia, on muutama seikka pidettävä mielessä:

• Tekstin suunta (RTL/LTR): Varmista, että tyylisi tukevat sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) kirjoitettuja kieliä. Tämä voi vaatia loogisten ominaisuuksien käyttöä CSS:ssä (esim. margin-inline-start margin-left:n sijaan) ja dir-attribuutin asianmukaista asettamista HTML-elementille.
• Sisällön lokalisointi: Kaikki portaalin sisällä oleva teksti tulisi lokalisoida käyttäjän haluamalle kielelle. Käytä i18n-kirjastoa (esim. react-intl, i18next) käännösten hallintaan.
• Numeroiden ja päivämäärien muotoilu: Muotoile numerot ja päivämäärät käyttäjän paikallisasetusten mukaisesti. Intl-API tarjoaa tähän toiminnallisuuksia.
• Kulttuuriset käytännöt: Ole tietoinen käyttöliittymäelementteihin liittyvistä kulttuurisista käytännöistä. Esimerkiksi painikkeiden sijoittelu voi vaihdella kulttuureittain.

Esimerkki: i18n react-intl:n kanssa

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

`react-intl`-kirjaston FormattedMessage-komponentti hakee käännetyn viestin käyttäjän paikallisasetusten perusteella. Määritä react-intl eri kielten käännöksilläsi.

Yleiset sudenkuopat ja ratkaisut

Vaikka createPortal on tehokas työkalu, on tärkeää olla tietoinen joistakin yleisistä sudenkuopista ja siitä, miten ne vältetään:

• Puuttuva portaalin juurielementti: Varmista, että portaalin juurena käyttämäsi DOM-elementti on olemassa ennen kuin createPortalia käyttävä komponentti liitetään. Hyvä käytäntö on sijoittaa se suoraan index.html-tiedostoon.
• Z-index-ristiriidat: Ole tarkkaavainen z-index-arvojen suhteen, kun sijoitat elementtejä createPortalin avulla. Käytä CSS:ää pinoamiskontekstien hallintaan ja varmista, että portaalin sisältö näytetään oikein.
• Tapahtumankäsittelyn ongelmat: Ymmärrä, miten tapahtumat etenevät portaalin läpi, ja käsittele ne asianmukaisesti. Käytä e.stopPropagation()-metodia estääksesi tapahtumia laukaisemasta tahattomia toimintoja.
• Muistivuodot: Siivoa tapahtumakuuntelijat ja viittaukset asianmukaisesti, kun createPortalia käyttävä komponentti poistetaan, jotta vältetään muistivuodot. Käytä tähän useEffect-hookia siivousfunktion kanssa.
• Odottamattomat vieritysongelmat: Portaalit voivat joskus häiritä sivun odotettua vierityskäyttäytymistä. Varmista, että tyylisi eivät estä vieritystä ja että modaalielementit eivät aiheuta sivun hyppimistä tai odottamatonta vierityskäyttäytymistä avautuessaan ja sulkeutuessaan.

Yhteenveto

React.createPortal on arvokas työkalu joustavien, saavutettavien ja ylläpidettävien käyttöliittymien luomiseen Reactissa. Ymmärtämällä sen tarkoituksen, käytön ja edistyneet tekniikat tapahtumien ja saavutettavuuden käsittelyyn, voit hyödyntää sen voimaa rakentaaksesi monimutkaisia ja mukaansatempaavia verkkosovelluksia, jotka tarjoavat erinomaisen käyttökokemuksen globaalille yleisölle. Muista ottaa huomioon kansainvälistämisen ja saavutettavuuden parhaat käytännöt varmistaaksesi, että sovelluksesi ovat osallistavia ja kaikkien käytettävissä.

Noudattamalla tämän oppaan ohjeita ja esimerkkejä voit luottavaisin mielin käyttää createPortalia ratkaisemaan yleisiä käyttöliittymähaasteita ja luomaan upeita verkkokokemuksia.