M

MLOG

Latviešu

Visaptverošs ceļvedis par React portāliem, apskatot to pielietojuma gadījumus, ieviešanu, priekšrocības un labākās prakses satura renderēšanai ārpus standarta komponentu hierarhijas.

React portāli: Satura renderēšana ārpus komponentu koka

React portāli nodrošina jaudīgu mehānismu, lai renderētu bērna komponentus DOM mezglā, kas atrodas ārpus vecāka komponenta DOM hierarhijas. Šī tehnika ir nenovērtējama dažādos scenārijos, piemēram, modālajiem logiem, rīka padomiem un situācijās, kur nepieciešama precīza kontrole pār elementu pozicionēšanu un izkārtojuma secību (stacking order) lapā.

Kas ir React portāli?

Tipiskā React aplikācijā komponenti tiek renderēti stingrā hierarhiskā struktūrā. Vecāka komponents satur bērna komponentus un tā tālāk. Tomēr dažreiz ir nepieciešams izlauzties no šīs struktūras. Tieši šeit noder React portāli. Portāls ļauj renderēt komponenta saturu citā DOM daļā, pat ja šī daļa nav tiešs komponenta pēctecis React kokā.

Iedomājieties, ka jums ir modālā loga komponents, kas jāattēlo jūsu aplikācijas augstākajā līmenī neatkarīgi no tā, kur tas tiek renderēts komponentu kokā. Bez portāliem jūs varētu mēģināt to panākt, izmantojot absolūto pozicionēšanu un z-indeksu, kas var novest pie sarežģītām stila problēmām un potenciāliem konfliktiem. Ar portāliem jūs varat tieši renderēt modālā loga saturu noteiktā DOM mezglā, piemēram, īpaši izveidotā "modal-root" elementā, nodrošinot, ka tas vienmēr tiek renderēts pareizajā līmenī.

Kāpēc izmantot React portālus?

React portāli risina vairākas bieži sastopamas problēmas tīmekļa izstrādē:

Kā ieviest React portālus

React portālu izmantošana ir vienkārša. Šeit ir soli pa solim ceļvedis:

  1. Izveidojiet DOM mezglu: Vispirms izveidojiet DOM mezglu, kurā vēlaties renderēt portāla saturu. To parasti dara jūsu `index.html` failā. Piemēram: 
    <div id="modal-root"></div>
  2. Izmantojiet `ReactDOM.createPortal()`: Savā React komponentā izmantojiet `ReactDOM.createPortal()` metodi, lai renderētu saturu izveidotajā DOM mezglā. Šī metode pieņem divus argumentus: React mezglu (saturu, ko vēlaties renderēt) un DOM mezglu, kurā to vēlaties renderēt. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Šis saturs tiek renderēts modal-root elementā!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Renderējiet komponentu: Renderējiet komponentu, kas satur portālu, tāpat kā jebkuru citu React komponentu. 
    function App() {
  return (
    <div>
      <h1>Mana aplikācija</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Šajā piemērā saturs `MyComponent` iekšienē tiks renderēts `modal-root` elementā, lai gan `MyComponent` tiek renderēts `App` komponenta iekšienē.

Piemērs: Modālā loga komponenta izveide ar React portāliem

Izveidosim pilnīgu modālā loga komponentu, izmantojot React portālus. Šis piemērs ietver pamata stilu un funkcionalitāti modālā loga atvēršanai un aizvēršanai.

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

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

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

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

  return (
    <div>
      <h1>Mana aplikācija</h1>
      <button onClick={handleOpenModal}>Atvērt modālo logu</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modālā loga saturs</h2>
          <p>Šis ir modālā loga saturs.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Šajā piemērā:

Jums būtu arī jāpievieno CSS stils `modal-overlay` un `modal` klasēm, lai pareizi pozicionētu modālo logu uz ekrāna. Piemēram:

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

Notikumu apstrāde ar portāliem

Viens svarīgs apsvērums, lietojot portālus, ir notikumu apstrāde. Notikumu burbuļošana (event bubbling) ar portāliem darbojas atšķirīgi nekā ar standarta React komponentiem.

Kad notikums notiek portāla iekšienē, tas kā parasti burbuļos augšup pa DOM koku. Tomēr React notikumu sistēma uzskata portālu par parastu React mezglu, kas nozīmē, ka notikumi burbuļos arī augšup pa React komponentu koku, kas satur portālu.

Tas dažreiz var novest pie negaidītas uzvedības, ja neesat uzmanīgs. Piemēram, ja jums ir notikumu apstrādātājs vecāka komponentā, kas būtu jāaktivizē tikai notikumiem šī komponenta iekšienē, to varētu aktivizēt arī notikumi portāla iekšienē.

Lai izvairītos no šīm problēmām, varat izmantot `stopPropagation()` metodi uz notikuma objekta, lai novērstu notikuma tālāku burbuļošanu. Alternatīvi, varat izmantot React sintētiskos notikumus un nosacītu renderēšanu, lai kontrolētu, kad notikumu apstrādātāji tiek aktivizēti.

Šeit ir piemērs, kā izmantot `stopPropagation()`, lai novērstu notikuma burbuļošanu uz vecāka komponentu:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Noklikšķināts portāla iekšienē!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Šis saturs tiek renderēts portālā.</div>,
    document.getElementById('portal-root')
  );
}

Šajā piemērā, noklikšķinot uz satura portāla iekšienē, tiks aktivizēta `handleClick` funkcija, bet notikums neburbuļos augšup uz kādu no vecāka komponentiem.

Labākās prakses React portālu izmantošanai

Šeit ir dažas labākās prakses, kas jāpatur prātā, strādājot ar React portāliem:

React portālu alternatīvas

Lai gan React portāli ir spēcīgs rīks, ir alternatīvas pieejas, ko varat izmantot, lai sasniegtu līdzīgus rezultātus. Dažas no biežākajām alternatīvām ir:

Izvēle, kuru pieeju izmantot, ir atkarīga no jūsu aplikācijas specifiskajām prasībām un lietotāja saskarnes elementu sarežģītības, ko mēģināt izveidot. Portāli parasti ir labākā opcija, kad nepieciešama precīza kontrole pār elementu pozicionēšanu un izkārtojuma secību un vēlaties izvairīties no CSS konfliktiem.

Globāli apsvērumi

Izstrādājot aplikācijas globālai auditorijai, ir būtiski apsvērt tādus faktorus kā lokalizācija, piekļūstamība un kultūras atšķirības. React portāliem var būt nozīme šo apsvērumu risināšanā:

Ņemot vērā šos globālos apsvērumus, jūs varat izveidot iekļaujošākas un lietotājam draudzīgākas aplikācijas daudzveidīgai auditorijai.

Noslēgums

React portāli ir spēcīgs un daudzpusīgs rīks satura renderēšanai ārpus standarta komponentu koka. Tie nodrošina tīru un elegantu risinājumu bieži sastopamiem lietotāja saskarnes modeļiem, piemēram, modālajiem logiem, rīka padomiem un uznirstošajiem logiem. Izprotot portālu darbību un ievērojot labākās prakses, jūs varat izveidot elastīgākas, uzturamākas un piekļūstamākas React aplikācijas.

Eksperimentējiet ar portāliem savos projektos un atklājiet daudzos veidus, kā tie var vienkāršot jūsu lietotāja saskarnes izstrādes darbplūsmu. Atcerieties apsvērt notikumu apstrādi, piekļūstamību un globālos apsvērumus, lietojot portālus produkcijas aplikācijās.

Apgūstot React portālus, jūs varat pacelt savas React prasmes jaunā līmenī un veidot sarežģītākas un lietotājam draudzīgākas tīmekļa aplikācijas globālai auditorijai.