M

MLOG

Lietuvių

Išsamus „React“ portalų vadovas, apimantis jų naudojimo atvejus, diegimą, privalumus ir geriausias praktikas, kaip atvaizduoti turinį už standartinės komponentų hierarchijos ribų.

React portalai: turinio atvaizdavimas už komponentų medžio ribų

React portalai suteikia galingą mechanizmą atvaizduoti antrinius komponentus į DOM mazgą, esantį už pagrindinio komponento DOM hierarchijos ribų. Ši technika yra neįkainojama įvairiais atvejais, pavyzdžiui, kuriant modalinius langus, patarimus ir situacijose, kai reikia tiksliai valdyti elementų padėtį ir išdėstymo tvarką puslapyje.

Kas yra „React“ portalai?

Įprastoje „React“ programoje komponentai atvaizduojami griežtoje hierarchinėje struktūroje. Pagrindinis komponentas apima antrinius komponentus ir t. t. Tačiau kartais reikia išsilaisvinti iš šios struktūros. Būtent čia praverčia „React“ portalai. Portalas leidžia atvaizduoti komponento turinį kitoje DOM dalyje, net jei ta dalis nėra tiesioginis komponento palikuonis „React“ medyje.

Įsivaizduokite, kad turite modalinio lango komponentą, kurį reikia rodyti aukščiausiame programos lygmenyje, nepriklausomai nuo to, kur jis atvaizduojamas komponentų medyje. Be portalų, tai galėtumėte bandyti pasiekti naudodami absoliutų pozicionavimą ir z-indeksą, o tai gali sukelti sudėtingų stiliaus problemų ir galimų konfliktų. Su portalais galite tiesiogiai atvaizduoti modalinio lango turinį į konkretų DOM mazgą, pavyzdžiui, tam skirtą „modal-root“ elementą, užtikrindami, kad jis visada bus atvaizduotas teisingame lygmenyje.

Kodėl verta naudoti „React“ portalus?

„React“ portalai sprendžia kelias įprastas interneto svetainių kūrimo problemas:

Kaip įdiegti „React“ portalus

Naudoti „React“ portalus yra paprasta. Štai žingsnis po žingsnio vadovas:

  1. Sukurkite DOM mazgą: Pirmiausia sukurkite DOM mazgą, kuriame norite atvaizduoti portalo turinį. Tai paprastai daroma jūsų `index.html` faile. Pavyzdžiui: 
    <div id="modal-root"></div>
  2. Naudokite `ReactDOM.createPortal()`: Savo „React“ komponente naudokite `ReactDOM.createPortal()` metodą, kad atvaizduotumėte turinį į sukurtą DOM mazgą. Šis metodas priima du argumentus: „React“ mazgą (turinį, kurį norite atvaizduoti) ir DOM mazgą, kuriame norite jį atvaizduoti. 
    import ReactDOM from 'react-dom';

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

export default MyComponent;
  3. Atvaizduokite komponentą: Atvaizduokite komponentą, kuriame yra portalas, kaip ir bet kurį kitą „React“ komponentą. 
    function App() {
  return (
    <div>
      <h1>Mano programa</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Šiame pavyzdyje `MyComponent` turinys bus atvaizduotas `modal-root` elemente, nors `MyComponent` yra atvaizduojamas `App` komponente.

Pavyzdys: modalinio lango komponento kūrimas su „React“ portalais

Sukurkime pilną modalinio lango komponentą naudojant „React“ portalus. Šis pavyzdys apima pagrindinį stilių ir funkcionalumą modaliniam langui atidaryti ir uždaryti.

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

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

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

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

  return (
    <div>
      <h1>Mano programa</h1>
      <button onClick={handleOpenModal}>Atidaryti modalinį langą</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modalinio lango turinys</h2>
          <p>Tai yra modalinio lango turinys.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Šiame pavyzdyje:

Jums taip pat reikės pridėti šiek tiek CSS stilių `modal-overlay` ir `modal` klasėms, kad modalinis langas būtų teisingai pozicionuotas ekrane. Pavyzdžiui:

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

Įvykių apdorojimas su portalais

Vienas svarbus aspektas naudojant portalus yra įvykių apdorojimas. Įvykių sklidimas (event bubbling) su portalais veikia kitaip nei su standartiniais „React“ komponentais.

Kai įvykis įvyksta portale, jis kyla aukštyn per DOM medį, kaip įprasta. Tačiau „React“ įvykių sistema traktuoja portalą kaip įprastą „React“ mazgą, o tai reiškia, kad įvykiai taip pat kils aukštyn per „React“ komponentų medį, kuriame yra portalas.

Tai kartais gali sukelti netikėtą elgesį, jei nebūsite atsargūs. Pavyzdžiui, jei turite įvykių apdorojimo funkciją pagrindiniame komponente, kuri turėtų būti suaktyvinta tik to komponento viduje esančiais įvykiais, ją gali suaktyvinti ir įvykiai portale.

Norėdami išvengti šių problemų, galite naudoti `stopPropagation()` metodą įvykio objekte, kad sustabdytumėte įvykio sklidimą aukštyn. Arba galite naudoti „React“ sintetinius įvykius ir sąlyginį atvaizdavimą, kad kontroliuotumėte, kada suaktyvinamos įvykių apdorojimo funkcijos.

Štai pavyzdys, kaip naudoti `stopPropagation()`, kad įvykis nekiltų į pagrindinį komponentą:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Paspausta portalo viduje!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Šis turinys atvaizduojamas portale.</div>,
    document.getElementById('portal-root')
  );
}

Šiame pavyzdyje, paspaudus ant turinio portale, bus suaktyvinta `handleClick` funkcija, tačiau įvykis nekils į jokius pagrindinius komponentus.

Geriausios „React“ portalų naudojimo praktikos

Štai keletas geriausių praktikų, kurių reikėtų nepamiršti dirbant su „React“ portalais:

Alternatyvos „React“ portalams

Nors „React“ portalai yra galingas įrankis, yra ir alternatyvių būdų pasiekti panašių rezultatų. Keletas įprastų alternatyvų:

Pasirinkimas, kurį metodą naudoti, priklauso nuo konkrečių jūsų programos reikalavimų ir UI elementų, kuriuos bandote sukurti, sudėtingumo. Portalai paprastai yra geriausias pasirinkimas, kai reikia tiksliai valdyti elementų pozicionavimą ir išdėstymo tvarką bei norite išvengti CSS konfliktų.

Globalūs aspektai

Kuriant programas pasaulinei auditorijai, būtina atsižvelgti į tokius veiksnius kaip lokalizacija, prieinamumas ir kultūriniai skirtumai. „React“ portalai gali padėti sprendžiant šiuos klausimus:

Atsižvelgdami į šiuos globalius aspektus, galite sukurti įtraukesnes ir patogesnes programas įvairiai auditorijai.

Išvada

„React“ portalai yra galingas ir universalus įrankis turiniui atvaizduoti už standartinio komponentų medžio ribų. Jie siūlo švarų ir elegantišką sprendimą įprastiems UI šablonams, tokiems kaip modaliniai langai, patarimai ir iškylantys langai. Suprasdami, kaip veikia portalai, ir laikydamiesi geriausių praktikų, galite kurti lankstesnes, lengviau prižiūrimas ir prieinamas „React“ programas.

Eksperimentuokite su portalais savo projektuose ir atraskite daugybę būdų, kaip jie gali supaprastinti jūsų UI kūrimo eigą. Nepamirškite atsižvelgti į įvykių apdorojimą, prieinamumą ir globalius aspektus, kai naudojate portalus gamybinėse programose.

Įvaldę „React“ portalus, galite pakelti savo „React“ įgūdžius į kitą lygį ir kurti sudėtingesnes bei patogesnes interneto programas pasaulinei auditorijai.