M

MLOG

Eesti

Põhjalik juhend Reacti portaalide kohta, mis käsitleb nende kasutusjuhtumeid, implementeerimist, eeliseid ja parimaid praktikaid sisu renderdamiseks väljaspool standardset komponendi hierarhiat.

Reacti portaalid: sisu renderdamine väljaspool komponendipuud

Reacti portaalid pakuvad võimsat mehhanismi alamkomponentide renderdamiseks DOM-sõlme, mis asub väljaspool vanemkomponendi DOM-hierarhiat. See tehnika on hindamatu erinevates stsenaariumides, näiteks modaalakende, tööriistavihjete ja olukordade puhul, kus on vaja täpset kontrolli elementide positsioneerimise ja virnastamisjärjekorra üle lehel.

Mis on Reacti portaalid?

Tüüpilises Reacti rakenduses renderdatakse komponendid ranges hierarhilises struktuuris. Vanemkomponent sisaldab alamkomponente ja nii edasi. Mõnikord on aga vaja sellest struktuurist välja murda. Siin tulevadki appi Reacti portaalid. Portaal võimaldab teil renderdada komponendi sisu DOM-i teise ossa, isegi kui see osa ei ole Reacti puus komponendi otsene järeltulija.

Kujutage ette, et teil on modaalakna komponent, mida tuleb kuvada teie rakenduse ülemisel tasemel, sõltumata sellest, kus see komponendipuus renderdatakse. Ilma portaalideta võiksite proovida seda saavutada absoluutse positsioneerimise ja z-indeksi abil, mis võib põhjustada keerulisi stiiliprobleeme ja potentsiaalseid konflikte. Portaalidega saate modaalakna sisu otse renderdada spetsiifilisse DOM-sõlme, näiteks spetsiaalsesse "modal-root" elementi, tagades, et see renderdatakse alati õigel tasemel.

Miks kasutada Reacti portaale?

Reacti portaalid lahendavad mitmeid levinud väljakutseid veebiarenduses:

Kuidas Reacti portaale implementeerida

Reacti portaalide kasutamine on lihtne. Siin on samm-sammuline juhend:

  1. Looge DOM-sõlm: Esmalt looge DOM-sõlm, kuhu soovite portaali sisu renderdada. Tavaliselt tehakse seda teie `index.html` failis. Näiteks: 
    <div id="modal-root"></div>
  2. Kasutage `ReactDOM.createPortal()`: Oma Reacti komponendis kasutage meetodit `ReactDOM.createPortal()`, et renderdada sisu loodud DOM-sõlme. See meetod võtab kaks argumenti: Reacti sõlme (sisu, mida soovite renderdada) ja DOM-sõlme, kuhu soovite selle renderdada. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Seda sisu renderdatakse modal-root'is!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Renderdage komponent: Renderdage portaali sisaldav komponent nii, nagu teeksite seda iga teise Reacti komponendiga. 
    function App() {
  return (
    <div>
      <h1>Minu rakendus</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Selles näites renderdatakse `MyComponent`'i sisu `modal-root` elemendi sisse, kuigi `MyComponent` renderdatakse `App` komponendi sees.

Näide: modaalakna komponendi loomine Reacti portaalidega

Loome täieliku modaalakna komponendi, kasutades Reacti portaale. See näide sisaldab põhilist stiili ja funktsionaalsust modaalakna avamiseks ja sulgemiseks.

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

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

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

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

  return (
    <div>
      <h1>Minu rakendus</h1>
      <button onClick={handleOpenModal}>Ava modaalaken</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modaalakna sisu</h2>
          <p>See on modaalakna sisu.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Selles näites:

Samuti peate lisama CSS-stiili `modal-overlay` ja `modal` klassidele, et modaalaken ekraanil õigesti positsioneerida. Näiteks:

.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;
}

Sündmuste käsitlemine portaalidega

Üks oluline kaalutlus portaalide kasutamisel on sündmuste käsitlemine. Sündmuste mullitamine (event bubbling) töötab portaalidega erinevalt kui standardsete Reacti komponentidega.

Kui sündmus toimub portaali sees, mullitab see tavapäraselt üles läbi DOM-puu. Kuid Reacti sündmustesüsteem käsitleb portaali kui tavalist Reacti sõlme, mis tähendab, et sündmused mullitavad ka üles läbi Reacti komponendipuu, mis portaali sisaldab.

See võib mõnikord põhjustada ootamatut käitumist, kui te ei ole ettevaatlik. Näiteks kui teil on sündmuste käsitleja vanemkomponendil, mis peaks käivituma ainult selle komponendi sees toimuvate sündmuste puhul, võib see käivituda ka portaali sees toimuvate sündmuste puhul.

Nende probleemide vältimiseks võite kasutada sündmuse objektil meetodit `stopPropagation()`, et vältida sündmuse edasist mullitamist. Alternatiivina võite kasutada Reacti sünteetilisi sündmusi ja tingimuslikku renderdamist, et kontrollida, millal sündmuste käsitlejad käivitatakse.

Siin on näide `stopPropagation()` kasutamisest, et vältida sündmuse mullitamist vanemkomponendini:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Klõpsati portaali sees!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>See sisu renderdatakse portaalis.</div>,
    document.getElementById('portal-root')
  );
}

Selles näites käivitab portaali sees olevale sisule klõpsamine `handleClick` funktsiooni, kuid sündmus ei mullita üles ühegi vanemkomponendini.

Reacti portaalide kasutamise parimad praktikad

Siin on mõned parimad praktikad, mida Reacti portaalidega töötades meeles pidada:

Alternatiivid Reacti portaalidele

Kuigi Reacti portaalid on võimas tööriist, on sarnaste tulemuste saavutamiseks ka alternatiivseid lähenemisviise. Mõned levinud alternatiivid on järgmised:

The choice of which approach to use depends on the specific requirements of your application and the complexity of the UI elements you're trying to create. Portals are generally the best option when you need precise control over the positioning and stacking order of elements and want to avoid CSS conflicts.

Globaalsed kaalutlused

Globaalsele sihtrühmale rakenduste arendamisel on oluline arvestada selliste teguritega nagu lokaliseerimine, juurdepääsetavus ja kultuurilised erinevused. Reacti portaalid võivad nende kaalutluste käsitlemisel rolli mängida:

Neid globaalseid kaalutlusi arvesse võttes saate luua kaasavamaid ja kasutajasõbralikumaid rakendusi mitmekesisele sihtrühmale.

Kokkuvõte

Reacti portaalid on võimas ja mitmekülgne tööriist sisu renderdamiseks väljaspool standardset komponendipuud. Need pakuvad puhast ja elegantset lahendust levinud kasutajaliidese mustritele nagu modaalaknad, tööriistavihjed ja hüpikaknad. Mõistes, kuidas portaalid töötavad ja järgides parimaid praktikaid, saate luua paindlikumaid, hooldatavamaid ja juurdepääsetavamaid Reacti rakendusi.

Katsetage portaalidega oma projektides ja avastage mitmeid viise, kuidas need saavad teie kasutajaliidese arendustöövoogu lihtsustada. Pidage meeles arvestada sündmuste käsitlemise, juurdepääsetavuse ja globaalsete kaalutlustega, kui kasutate portaale tootmisrakendustes.

Reacti portaalide valdamisega saate viia oma Reacti oskused järgmisele tasemele ja luua keerukamaid ning kasutajasõbralikumaid veebirakendusi globaalsele sihtrühmale.