Reacti Portaalid: Modaalide ja Kohtspikrite meisterlik kasutamine parema kasutajakogemuse nimel

Tänapäevases veebiarenduses on intuitiivsete ja kaasahaaravate kasutajaliideste loomine esmatähtis. React, populaarne JavaScripti teek kasutajaliideste ehitamiseks, pakub selle saavutamiseks mitmesuguseid tööriistu ja tehnikaid. Üks selline võimas tööriist on Reacti Portaalid. See blogipostitus süveneb Reacti Portaalide maailma, keskendudes nende rakendamisele ligipääsetavate ja visuaalselt atraktiivsete modaalide ning kohtspikrite loomisel.

Mis on Reacti Portaalid?

Reacti Portaalid pakuvad viisi renderdada komponendi lapsi DOM-i sõlme, mis eksisteerib väljaspool vanemkomponendi DOM-i hierarhiat. Lihtsamalt öeldes võimaldab see teil vabaneda standardsest Reacti komponendipuu struktuurist ja sisestada elemente otse HTML-struktuuri teise ossa. See on eriti kasulik olukordades, kus peate kontrollima virnastamiskonteksti (stacking context) või positsioneerima elemente väljaspool nende vanemkonteineri piire.

Tavapäraselt renderdatakse Reacti komponente DOM-is nende vanemkomponentide lastena. See võib mõnikord põhjustada stiili- ja paigutusprobleeme, eriti kui tegemist on elementidega nagu modaalid või kohtspikrid, mis peavad ilmuma muu sisu peale või olema positsioneeritud vaateakna (viewport) suhtes. Reacti Portaalid pakuvad lahendust, võimaldades neid elemente renderdada otse DOM-ipuu teise ossa, möödudes neist piirangutest.

Miks kasutada Reacti Portaale?

Mitmed olulised eelised muudavad Reacti Portaalid väärtuslikuks tööriistaks teie Reacti arendusarsenalis:

• Parem stiliseerimine ja paigutus: Portaalid võimaldavad teil elemente positsioneerida väljaspool nende vanemkonteinerit, ületades stiiliprobleeme, mis on põhjustatud overflow: hidden'ist, z-index'i piirangutest või keerulistest paigutuspiirangutest. Kujutage ette modaali, mis peab katma kogu ekraani, isegi kui selle vanemkonteineril on overflow: hidden. Portaalid võimaldavad teil renderdada modaali otse body'sse, möödudes sellest piirangust.
• Parem ligipääsetavus: Portaalid on ligipääsetavuse seisukohalt üliolulised, eriti modaalide puhul. Modaali sisu renderdamine otse body'sse võimaldab teil hõlpsasti hallata fookuse lõksustamist (focus trapping), tagades, et ekraanilugejaid või klaviatuurinavigatsiooni kasutavad kasutajad püsivad modaali sees, kui see on avatud. See on oluline sujuva ja ligipääsetava kasutajakogemuse pakkumiseks.
• Puhtam komponentide struktuur: Renderdades modaali või kohtspikri sisu väljaspool peamist komponendipuud, saate hoida oma komponendistruktuuri puhtamana ja paremini hallatavana. See murede lahusus (separation of concerns) muudab teie koodi lihtsamini loetavaks, mõistetavaks ja hooldatavaks.
• Virnastamiskonteksti probleemide vältimine: CSS-i virnastamiskontekste võib olla kurikuulsalt keeruline hallata. Portaalid aitavad teil neid probleeme vältida, võimaldades renderdada elemente otse DOM-i juurelementi, tagades, et need on alati korrektselt positsioneeritud teiste lehel olevate elementide suhtes.

Modaalide implementeerimine Reacti Portaalidega

Modaalid on levinud kasutajaliidese muster, mida kasutatakse olulise teabe kuvamiseks või kasutajatelt sisendi küsimiseks. Uurime, kuidas luua modaali Reacti Portaalide abil.

1. Portaali juurelemendi loomine

Esmalt peate looma DOM-sõlme, kuhu modaal renderdatakse. Tavaliselt tehakse seda, lisades oma HTML-faili (tavaliselt body'sse) kindla ID-ga div elemendi:

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

              
                Copy
              
            
          

2. Modaali komponendi loomine

Järgmiseks looge Reacti komponent, mis esindab modaali. See komponent sisaldab modaali sisu ja loogikat.

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

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Sule</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Selgitus:

• isOpen prop: Määrab, kas modaal on nähtav.
• onClose prop: Funktsioon modaali sulgemiseks.
• children prop: Sisu, mida kuvatakse modaali sees.
• modalRoot ref: Viitab DOM-sõlmele, kuhu modaal renderdatakse (#modal-root).
• useEffect hook: Tagab, et modaal renderdatakse alles pärast komponendi ühendamist (mount), et vältida probleeme, kus portaali juurelement pole kohe saadaval.
• ReactDOM.createPortal: See on Reacti Portaalide kasutamise võti. See võtab kaks argumenti: Reacti element, mida renderdada (modalContent) ja DOM-sõlm, kuhu see tuleks renderdada (modalRoot.current).
• Taustakihil klõpsamine: Sulgeb modaali. Kasutame e.stopPropagation() modal-content div'il, et vältida modaali sees tehtud klõpsude modaali sulgemist.

3. Modaali komponendi kasutamine

Nüüd saate Modal komponenti oma rakenduses kasutada:

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

const 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
              
            
          

See näide demonstreerib, kuidas kontrollida modaali nähtavust isOpen prop'i ning openModal ja closeModal funktsioonide abil. Sisu <Modal> siltide vahel renderdatakse modaali sisse.

4. Modaali stiliseerimine

Lisage CSS-stiilid modaali positsioneerimiseks ja stiliseerimiseks. Siin on põhiline näide:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Poolläbipaistev taust */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Tagab, et see on muu sisu peal */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

CSS-i selgitus:

• position: fixed: Tagab, et modaal katab kogu vaateakna, sõltumata kerimisest.
• background-color: rgba(0, 0, 0, 0.5): Loob modaali taha poolläbipaistva taustakihi.
• display: flex, justify-content: center, align-items: center: Tsentreerib modaali horisontaalselt ja vertikaalselt.
• z-index: 1000: Tagab, et modaal renderdatakse kõigi teiste lehel olevate elementide peale.

5. Ligipääsetavuse kaalutlused modaalide puhul

Ligipääsetavus on modaalide implementeerimisel ülioluline. Siin on mõned olulised kaalutlused:

• Fookuse haldamine: Kui modaal avaneb, tuleks fookus automaatselt viia modaali sees olevale elemendile (nt esimesele sisestusväljale või sulgemisnupule). Kui modaal sulgub, peaks fookus naasma elemendile, mis modaali avamise käivitas. Seda saavutatakse sageli Reacti useRef hook'i abil, et salvestada eelnevalt fookuses olnud element.
• Klaviatuurinavigatsioon: Tagage, et kasutajad saaksid modaalis navigeerida klaviatuuri abil (Tab-klahv). Fookus peaks olema modaali sees lõksus, takistades kasutajatel sellest kogemata välja tab'ida. Raamatukogud nagu react-focus-lock võivad sellega aidata.
• ARIA atribuudid: Kasutage ARIA atribuute, et pakkuda ekraanilugejatele semantilist teavet modaali kohta. Näiteks kasutage aria-modal="true" modaali konteineril ja aria-label või aria-labelledby, et anda modaalile kirjeldav silt.
• Sulgemismehhanism: Pakkuge mitu viisi modaali sulgemiseks, näiteks sulgemisnupp, taustakihil klõpsamine või Escape-klahvi vajutamine.

Fookuse haldamise näide (kasutades useRef'i):

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

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modaali sisu</h2>
        <p>See on modaali sisu.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- Esimene fookustatav element -->
        <button onClick={onClose}>Sule</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Fookuse haldamise koodi selgitus:

• previouslyFocusedElement.current: Salvestab elemendi, mis oli fookuses enne modaali avamist.
• firstFocusableElement.current: Viitab esimesele fookustatavale elemendile modaali *sees* (selles näites tekstisisestus).
• Kui modaal avaneb (isOpen on tõene):
  • Hetkel fookuses olev element salvestatakse.
  • Fookus viiakse elemendile firstFocusableElement.current.
  • Lisatakse sündmuste kuulaja, et kuulata Escape-klahvi, mis sulgeb modaali.
• Kui modaal sulgub (puhastusfunktsioon):
  • Escape-klahvi sündmuste kuulaja eemaldatakse.
  • Fookus tagastatakse elemendile, mis oli eelnevalt fookuses.

Kohtspikrite implementeerimine Reacti Portaalidega

Kohtspikrid on väikesed informatiivsed hüpikaknad, mis ilmuvad, kui kasutaja hõljutab kursorit elemendi kohal. Reacti Portaale saab kasutada kohtspikrite loomiseks, mis on korrektselt positsioneeritud, sõltumata vanemelemendi stiilist või paigutusest.

1. Portaali juurelemendi loomine (kui pole juba loodud)

Kui te pole modaalide jaoks veel portaali juurelementi loonud, lisage oma HTML-faili (tavaliselt body'sse) kindla ID-ga div element:

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Kohtspikri komponendi loomine

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

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px vahe
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Selgitus:

• text prop: Tekst, mida kuvatakse kohtspikris.
• children prop: Element, mis käivitab kohtspikri (element, mille kohal kasutaja kursorit hõljutab).
• position prop: Kohtspikri asukoht käivitava elemendi suhtes ('top', 'bottom', 'left', 'right'). Vaikimisi 'top'.
• isVisible state: Kontrollib kohtspikri nähtavust.
• tooltipRoot ref: Viitab DOM-sõlmele, kuhu kohtspikker renderdatakse (#tooltip-root).
• tooltipRef ref: Viitab kohtspikri elemendile endale, mida kasutatakse selle mõõtmete arvutamiseks.
• triggerRef ref: Viitab elemendile, mis käivitab kohtspikri (children).
• handleMouseEnter ja handleMouseLeave: Sündmuste käsitlejad käivitava elemendi kohal hõljumiseks.
• updatePosition: Arvutab kohtspikri õige asukoha, tuginedes position prop'ile ning käivitava ja kohtspikri elementide mõõtmetele. See kasutab getBoundingClientRect(), et saada elementide asukoht ja mõõtmed vaateakna suhtes.
• ReactDOM.createPortal: Renderdab kohtspikri sisu tooltipRoot'i.

3. Kohtspikri komponendi kasutamine

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hõljutage kursorit selle <Tooltip text="See on kohtspikker!
Mitme reaga." 
position="bottom">teksti</Tooltip> kohal, et näha kohtspikrit.
      </p>

      <button>
        Hõljutage <Tooltip text="Nupu kohtspikker" position="top">siin</Tooltip> kohtspikri nägemiseks.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

See näide näitab, kuidas kasutada Tooltip komponenti, et lisada tekstile ja nuppudele kohtspikreid. Saate kohandada kohtspikri teksti ja asukohta, kasutades text ja position prop'e.

4. Kohtspikri stiliseerimine

Lisage CSS-stiilid kohtspikri positsioneerimiseks ja stiliseerimiseks. Siin on põhiline näide:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Tume taust */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Tagab, et see on muu sisu peal */
  white-space: pre-line; /* Austab reavahetusi text prop'is */
}

            

              
                Copy
              
            
          

CSS-i selgitus:

• position: absolute: Positsioneerib kohtspikri tooltip-root'i suhtes. Reacti komponendis olev updatePosition funktsioon arvutab täpsed top ja left väärtused, et paigutada kohtspikker käivitava elemendi lähedale.
• background-color: rgba(0, 0, 0, 0.8): Loob kohtspikrile kergelt läbipaistva tumeda tausta.
• white-space: pre-line: See on oluline reavahetuste säilitamiseks, mida võite lisada text prop'i. Ilma selleta ilmuks kogu kohtspikri tekst ühel real.

Globaalsed kaalutlused ja parimad praktikad

Arendades Reacti rakendusi globaalsele publikule, arvestage järgmiste parimate tavadega:

• Rahvusvahelistamine (i18n): Kasutage teeki nagu react-i18next või FormatJS tõlgete ja lokaliseerimise haldamiseks. See võimaldab teil oma rakendust hõlpsasti kohandada erinevatele keeltele ja piirkondadele. Modaalide ja kohtspikrite puhul veenduge, et tekstisisu on korralikult tõlgitud.
• Paremalt vasakule (RTL) tugi: Keelte puhul, mida loetakse paremalt vasakule (nt araabia, heebrea), veenduge, et teie modaalid ja kohtspikrid kuvatakse korrektselt. Võimalik, et peate elementide positsioneerimist ja stiili kohandama, et arvestada RTL-paigutustega. CSS-i loogilised omadused (nt margin-inline-start margin-left'i asemel) võivad olla abiks.
• Kultuuriline tundlikkus: Olge modaalide ja kohtspikrite kujundamisel teadlik kultuurilistest erinevustest. Vältige piltide või sümbolite kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.
• Ajavööndid ja kuupäevavormingud: Kui teie modaalid või kohtspikrid kuvavad kuupäevi või aegu, veenduge, et need on vormindatud vastavalt kasutaja lokaadile ja ajavööndile. Teegid nagu moment.js (kuigi pärandvara, on siiski laialt levinud) või date-fns võivad sellega aidata.
• Ligipääsetavus erinevate võimetega inimestele: Järgige ligipääsetavuse juhiseid (WCAG), et tagada teie modaalide ja kohtspikrite kasutatavus puuetega inimestele. See hõlmab alternatiivteksti pakkumist piltidele, piisava värvikontrasti tagamist ja klaviatuurinavigatsiooni toe pakkumist.

Kokkuvõte

Reacti Portaalid on võimas tööriist paindlike ja ligipääsetavate kasutajaliideste loomiseks. Mõistes, kuidas neid tõhusalt kasutada, saate luua modaale ja kohtspikreid, mis parandavad kasutajakogemust ning teie Reacti rakenduste struktuuri ja hooldatavust. Pidage meeles, et mitmekesisele publikule arendades tuleb esikohale seada ligipääsetavus ja globaalsed kaalutlused, tagades, et teie rakendused on kaasavad ja kõigile kasutatavad.

Lisalugemist

• Reacti Portaalide dokumentatsioon
• Veebisisu ligipääsetavuse suunised (WCAG)
• react-i18next