React createPortal: Zvládnutie tvorby portálov a spracovania udalostí

V modernom webovom vývoji s Reactom je kľúčové vytvárať používateľské rozhrania, ktoré sa bezproblémovo integrujú s podkladovou štruktúrou dokumentu. Hoci komponentový model Reactu vyniká v správe virtuálneho DOMu, niekedy potrebujeme vykresliť prvky mimo bežnej hierarchie komponentov. Práve tu prichádza na rad createPortal. Tento sprievodca podrobne skúma createPortal, pokrýva jeho účel, použitie a pokročilé techniky na spracovanie udalostí a budovanie zložitých prvkov UI. Budeme sa zaoberať aj aspektmi internacionalizácie, osvedčenými postupmi pre prístupnosť a bežnými nástrahami, ktorým sa treba vyhnúť.

Čo je React createPortal?

createPortal je API v Reacte, ktoré umožňuje vykresliť potomkov React komponentu do inej časti DOM stromu, mimo hierarchie rodičovského komponentu. Toto je obzvlášť užitočné na vytváranie prvkov ako modálne okná, tooltity, rozbaľovacie ponuky a prekrytia, ktoré je potrebné umiestniť na najvyššiu úroveň dokumentu alebo do špecifického kontajnera, bez ohľadu na to, kde sa v strome React komponentov nachádza komponent, ktorý ich spúšťa.

Bez createPortal si dosiahnutie tohto cieľa často vyžaduje zložité riešenia, ako je priama manipulácia s DOMom alebo použitie absolútneho pozicovania v CSS, čo môže viesť k problémom so stacking kontextmi, konfliktmi z-indexu a prístupnosťou.

Prečo používať createPortal?

Tu sú kľúčové dôvody, prečo je createPortal cenným nástrojom vo vašom arzenáli Reactu:

• Vylepšená štruktúra DOM: Zabraňuje hlbokému vnáraniu komponentov v DOMe, čo vedie k čistejšej a ľahšie spravovateľnej štruktúre. Je to dôležité najmä pri zložitých aplikáciách s mnohými interaktívnymi prvkami.
• Zjednodušený štýl: Jednoducho umiestnite prvky relatívne k viewportu alebo špecifickým kontajnerom bez spoliehania sa na zložité triky v CSS. Zjednodušuje to štýlovanie a rozloženie, najmä pri práci s prvkami, ktoré potrebujú prekrývať iný obsah.
• Zlepšená prístupnosť: Uľahčuje vytváranie prístupných UI tým, že umožňuje spravovať focus a klávesnicovú navigáciu nezávisle od hierarchie komponentov. Napríklad zabezpečenie, že focus zostane v modálnom okne.
• Lepšie spracovanie udalostí: Umožňuje správne šírenie udalostí z obsahu portálu do stromu Reactu, čím sa zabezpečí, že event listenery pripojené k rodičovským komponentom budú stále fungovať podľa očakávaní.

Základné použitie createPortal

API createPortal prijíma dva argumenty:

1. React uzol (JSX), ktorý chcete vykresliť.
2. DOM prvok, do ktorého chcete uzol vykresliť. Tento DOM prvok by mal ideálne existovať predtým, ako sa komponent používajúci createPortal pripojí.

Tu je jednoduchý príklad:

Príklad: Vykreslenie modálneho okna

Povedzme, že máte modálny komponent, ktorý chcete vykresliť na koniec prvku body.

            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 
 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
              
            
          

Vysvetlenie:

• Importujeme ReactDOM, pretože createPortal je metóda objektu ReactDOM.
• Predpokladáme, že vo vašom HTML existuje DOM prvok s ID modal-root. Sem sa bude vykresľovať modálne okno. Uistite sa, že tento prvok existuje. Bežnou praxou je pridať <div id="modal-root"></div> tesne pred uzatvárací tag </body> vo vašom súbore index.html.
• Používame ReactDOM.createPortal na vykreslenie JSX modálneho okna do prvku modalRoot.
• Používame e.stopPropagation(), aby sme zabránili udalosti onClick na obsahu modálneho okna spustiť handler onClose na prekrytí. Tým sa zabezpečí, že kliknutie dovnútra modálneho okna ho nezatvorí.

Použitie:

            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
              
            
          

Tento príklad ukazuje, ako vykresliť modálne okno mimo bežnej hierarchie komponentov, čo vám umožňuje umiestniť ho absolútne na stránke. Použitie createPortal týmto spôsobom rieši bežné problémy so stacking kontextmi a umožňuje vám jednoducho vytvárať konzistentný štýl modálnych okien vo vašej aplikácii.

Spracovanie udalostí s createPortal

Jednou z kľúčových výhod createPortal je, že zachováva normálne správanie event bubbling (šírenia udalostí) v Reacte. To znamená, že udalosti pochádzajúce z obsahu portálu sa budú stále šíriť hore stromom komponentov Reactu, čo umožňuje rodičovským komponentom ich spracovať.

Je však dôležité pochopiť, ako sa udalosti spracúvajú, keď prekročia hranicu portálu.

Príklad: Spracovanie udalostí mimo portálu

            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
              
            
          

Vysvetlenie:

• Používame ref na prístup k prvku rozbaľovacej ponuky vykreslenému v portáli.
• Pripojíme mousedown event listener k document, aby sme detekovali kliknutia mimo rozbaľovacej ponuky.
• Vnútri event listenera kontrolujeme, či sa kliknutie uskutočnilo mimo rozbaľovacej ponuky pomocou dropdownRef.current.contains(event.target).
• Ak sa kliknutie uskutočnilo mimo rozbaľovacej ponuky, zatvoríme ju nastavením isOpen na false.

Tento príklad ukazuje, ako spracovať udalosti, ktoré sa vyskytnú mimo obsahu portálu, čo vám umožňuje vytvárať interaktívne prvky, ktoré reagujú na akcie používateľa v okolitom dokumente.

Pokročilé prípady použitia

createPortal nie je obmedzený len na jednoduché modálne okná a tooltity. Môže sa použiť v rôznych pokročilých scenároch, vrátane:

• Kontextové ponuky: Dynamicky vykresľujte kontextové ponuky blízko kurzora myši po kliknutí pravým tlačidlom.
• Notifikácie: Zobrazujte notifikácie v hornej časti obrazovky bez ohľadu na hierarchiu komponentov.
• Vlastné Popovery: Vytvárajte vlastné popover komponenty s pokročilým pozicovaním a štýlovaním.
• Integrácia s knižnicami tretích strán: Použite createPortal na integráciu React komponentov s knižnicami tretích strán, ktoré vyžadujú špecifické štruktúry DOM.

Príklad: Vytvorenie kontextovej ponuky

            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
              
            
          

Vysvetlenie:

• Používame udalosť onContextMenu na detekciu kliknutí pravým tlačidlom myši na cieľovom prvku.
• Zabránime zobrazeniu predvolenej kontextovej ponuky pomocou event.preventDefault().
• Ukladáme súradnice myši do stavovej premennej contextMenu.
• Vykresľujeme kontextovú ponuku v portáli, umiestnenú na súradniciach myši.
• Zahrnieme rovnakú logiku detekcie kliknutia mimo ako v predchádzajúcom príklade, aby sa kontextová ponuka zatvorila, keď používateľ klikne mimo nej.

Aspekty prístupnosti

Pri používaní createPortal je kľúčové zohľadniť prístupnosť, aby sa zabezpečilo, že vaša aplikácia bude použiteľná pre každého.

Správa focusu

Keď sa otvorí portál (napr. modálne okno), mali by ste zabezpečiť, aby sa focus automaticky presunul na prvý interaktívny prvok v portáli. To pomáha používateľom, ktorí navigujú pomocou klávesnice alebo čítačky obrazovky, ľahko pristupovať k obsahu portálu.

Keď sa portál zatvorí, mali by ste vrátiť focus na prvok, ktorý spustil otvorenie portálu. Tým sa zachová konzistentný tok navigácie.

Atribúty ARIA

Používajte atribúty ARIA na poskytnutie sémantických informácií o obsahu portálu. Napríklad, použite aria-modal="true" na modálnom prvku na označenie, že ide o modálny dialóg. Použite aria-labelledby na prepojenie modálneho okna s jeho nadpisom a aria-describedby na prepojenie s jeho popisom.

Navigácia klávesnicou

Uistite sa, že používatelia môžu navigovať obsahom portálu pomocou klávesnice. Použite atribút tabindex na ovládanie poradia focusu a zabezpečte, aby boli všetky interaktívne prvky dostupné pomocou klávesnice.

Zvážte "uväznenie" focusu v portáli, aby používatelia nemohli náhodne prejsť mimo neho. To sa dá dosiahnuť počúvaním klávesu Tab a programovým presúvaním focusu na prvý alebo posledný interaktívny prvok v portáli.

Príklad: Prístupné modálne okno

            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
              
            
          

Vysvetlenie:

• Používame atribúty ARIA ako aria-modal, aria-labelledby a aria-describedby na poskytnutie sémantických informácií o modálnom okne.
• Používame hook useEffect na správu focusu, keď sa modálne okno otvára a zatvára.
• Uložíme aktuálne zameraný prvok pred otvorením modálneho okna a obnovíme naň focus, keď sa modálne okno zatvorí.
• Uväzníme focus v modálnom okne pomocou keydown event listenera.

Aspekty internacionalizácie (i18n)

Pri vývoji aplikácií pre globálne publikum je internacionalizácia (i18n) kritickým faktorom. Pri používaní createPortal je potrebné mať na pamäti niekoľko bodov:

• Smer textu (RTL/LTR): Uistite sa, že vaše štýlovanie podporuje jazyky písané zľava doprava (LTR) aj sprava doľava (RTL). To môže zahŕňať použitie logických vlastností v CSS (napr. margin-inline-start namiesto margin-left) a správne nastavenie atribútu dir na prvku HTML.
• Lokalizácia obsahu: Všetok text v portáli by mal byť lokalizovaný do preferovaného jazyka používateľa. Použite i18n knižnicu (napr. react-intl, i18next) na správu prekladov.
• Formátovanie čísel a dátumov: Formátujte čísla a dátumy podľa miestnych zvyklostí používateľa. API Intl poskytuje funkcionality na tento účel.
• Kultúrne zvyklosti: Buďte si vedomí kultúrnych zvyklostí týkajúcich sa prvkov UI. Napríklad umiestnenie tlačidiel sa môže v rôznych kultúrach líšiť.

Príklad: i18n s react-intl

            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
              
            
          

Komponent FormattedMessage z react-intl načíta preloženú správu na základe miestneho nastavenia používateľa. Nakonfigurujte react-intl s vašimi prekladmi pre rôzne jazyky.

Bežné nástrahy a riešenia

Hoci je createPortal mocný nástroj, je dôležité byť si vedomý niektorých bežných nástrah a vedieť, ako sa im vyhnúť:

• Chýbajúci koreňový prvok portálu: Uistite sa, že DOM prvok, ktorý používate ako koreňový prvok portálu, existuje predtým, ako sa komponent používajúci createPortal pripojí. Dobrou praxou je umiestniť ho priamo do súboru index.html.
• Konflikty Z-Indexu: Dávajte pozor na hodnoty z-indexu pri pozicovaní prvkov s createPortal. Použite CSS na správu stacking kontextov a zabezpečte správne zobrazenie obsahu vášho portálu.
• Problémy so spracovaním udalostí: Pochopte, ako sa udalosti šíria cez portál, a správne ich spracujte. Použite e.stopPropagation(), aby ste zabránili udalostiam spúšťať nechcené akcie.
• Úniky pamäte: Správne vyčistite event listenery a referencie, keď sa komponent používajúci createPortal odpojí, aby ste predišli únikom pamäte. Na to použite hook useEffect s čistiacou funkciou.
• Neočakávané problémy so skrolovaním: Portály môžu niekedy zasahovať do očakávaného správania skrolovania stránky. Uistite sa, že vaše štýly nebránia skrolovaniu a že modálne prvky nespôsobujú skoky na stránke alebo neočakávané správanie skrolovania pri ich otvorení a zatvorení.

Záver

React.createPortal je cenný nástroj na vytváranie flexibilných, prístupných a udržiavateľných UI v Reacte. Porozumením jeho účelu, použitiu a pokročilým technikám na spracovanie udalostí a prístupnosti môžete využiť jeho silu na budovanie zložitých a pútavých webových aplikácií, ktoré poskytujú vynikajúci používateľský zážitok pre globálne publikum. Nezabudnite zohľadniť osvedčené postupy v oblasti internacionalizácie a prístupnosti, aby ste zaistili, že vaše aplikácie budú inkluzívne a použiteľné pre každého.

Dodržiavaním pokynov a príkladov v tomto sprievodcovi môžete s istotou používať createPortal na riešenie bežných výziev v oblasti UI a vytvárať ohromujúce webové zážitky.