React Portal Hendelsesfangst: Avskjæring av hendelser på tvers av portaler

React Portaler tilbyr en kraftig mekanisme for å rendre barneelementer inn i en DOM-node som eksisterer utenfor DOM-hierarkiet til forelderkomponenten. Dette er spesielt nyttig for modaler, verktøytips og andre UI-elementer som trenger å unnslippe begrensningene til sine foreldercontainere. Dette introduserer imidlertid også kompleksitet når man håndterer hendelser, spesielt når man trenger å avskjære eller fange opp hendelser som oppstår inne i en portal, men er ment for elementer utenfor den. Denne artikkelen utforsker disse kompleksitetene og gir praktiske løsninger for å oppnå avskjæring av hendelser på tvers av portaler.

Forståelse av React Portaler

Før vi dykker ned i hendelsesfangst, la oss etablere en solid forståelse av React Portaler. En portal lar deg rendre en barnekomponent inn i en annen del av DOM-en. Se for deg at du har en dypt nestet komponent og ønsker å rendre en modal direkte under `body`-elementet. Uten en portal ville modalen vært underlagt stylingen og posisjoneringen til sine forfedre, noe som potensielt kunne føre til layoutproblemer. En portal omgår dette ved å plassere modalen direkte der du vil ha den.

Den grunnleggende syntaksen for å lage en portal er:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Her er `child` React-elementet (eller komponenten) du vil rendre, og `domNode` er DOM-noden hvor du vil rendre den.

Eksempel:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Handle case where modal-root doesn't exist

  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
              
            
          

I dette eksempelet rendrer `Modal`-komponenten sine barn inn i en DOM-node med ID-en `modal-root`. `onClick`-håndtereren på `.modal-overlay` gjør det mulig å lukke modalen ved å klikke utenfor innholdet, mens `e.stopPropagation()` forhindrer at klikket på overlegget lukker modalen når man klikker på selve innholdet.

Utfordringen med hendelseshåndtering på tvers av portaler

Selv om portaler løser layoutproblemer, introduserer de utfordringer når det gjelder håndtering av hendelser. Spesifikt kan den standard hendelsesboblingsmekanismen i DOM-en oppføre seg uventet når hendelser oppstår inne i en portal.

Scenario: Tenk deg et scenario hvor du har en knapp inne i en portal, og du vil spore klikk på den knappen fra en komponent høyere opp i React-treet (men *utenfor* portalens render-lokasjon). Fordi portalen bryter DOM-hierarkiet, vil hendelsen kanskje ikke boble opp til den forventede forelderkomponenten i React-treet.

Sentrale utfordringer:

• Hendelsesbobling: Hendelser forplanter seg oppover DOM-treet, men portalen skaper en diskontinuitet i det treet. Hendelsen bobler opp gjennom DOM-hierarkiet *innenfor* portalens destinasjonsnode, men ikke nødvendigvis tilbake opp til React-komponenten som opprettet portalen.
• `stopPropagation()`: Selv om det er nyttig i mange tilfeller, kan ukritisk bruk av `stopPropagation()` forhindre hendelser i å nå nødvendige lyttere, inkludert de utenfor portalen.
• Hendelsesmål (Event Target): `event.target`-egenskapen peker fortsatt på DOM-elementet der hendelsen oppsto, selv om det elementet er inne i en portal.

Strategier for avskjæring av hendelser på tvers av portaler

Flere strategier kan benyttes for å håndtere hendelser som oppstår inne i portaler og når komponenter utenfor dem:

1. Hendelsesdelegering

Hendelsesdelegering innebærer å feste en enkelt hendelseslytter til et forelderelement (ofte dokumentet eller en felles stamfar) og deretter bestemme det faktiske målet for hendelsen. Denne tilnærmingen unngår å feste tallrike hendelseslyttere til individuelle elementer, noe som forbedrer ytelsen og forenkler hendelseshåndteringen.

Slik fungerer det:

1. Fest en hendelseslytter til en felles stamfar (f.eks. `document.body`).
2. I hendelseslytteren, sjekk `event.target`-egenskapen for å identifisere elementet som utløste hendelsen.
3. Utfør ønsket handling basert på hendelsesmålet.

Eksempel:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Perform actions based on the clicked button
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

I dette eksempelet fester `PortalAwareComponent` en klikk-lytter til `document.body`. Lytteren sjekker om det klikkede elementet har klassen `portal-button`. Hvis det har det, logger den en melding til konsollen og utfører eventuelle andre nødvendige handlinger. Denne tilnærmingen fungerer uavhengig av om knappen er inne i eller utenfor en portal.

Fordeler:

• Ytelse: Reduserer antallet hendelseslyttere.
• Enkelhet: Sentraliserer logikken for hendelseshåndtering.
• Fleksibilitet: Håndterer enkelt hendelser fra dynamisk tillagte elementer.

Vurderinger:

• Spesifisitet: Krever nøye målretting av hendelsens opprinnelse ved hjelp av `event.target` og potensielt traversering oppover DOM-treet med `event.target.closest()`.
• Hendelsestype: Best egnet for hendelser som bobler.

2. Utsending av egendefinerte hendelser

Egendefinerte hendelser lar deg opprette og sende ut hendelser programmatisk. Dette er nyttig når du trenger å kommunisere mellom komponenter som ikke er direkte koblet i React-treet, eller når du trenger å utløse hendelser basert på egendefinert logikk.

Slik fungerer det:

1. Opprett et nytt `Event`-objekt ved hjelp av `Event`-konstruktøren.
2. Send ut hendelsen ved hjelp av `dispatchEvent`-metoden på et DOM-element.
3. Lytt etter den egendefinerte hendelsen med `addEventListener`.

Eksempel:

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

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

I dette eksempelet, når knappen inne i portalen klikkes, sendes en egendefinert hendelse med navnet `portalButtonClick` ut på `document`. `PortalAwareComponent` lytter etter denne hendelsen og logger meldingen til konsollen.

Fordeler:

• Fleksibilitet: Tillater kommunikasjon mellom komponenter uavhengig av deres posisjon i React-treet.
• Tilpasningsdyktighet: Du kan inkludere egendefinerte data i hendelsens `detail`-egenskap.
• Frakobling: Reduserer avhengigheter mellom komponenter.

Vurderinger:

• Navngivning av hendelser: Velg unike og beskrivende hendelsesnavn for å unngå konflikter.
• Dataserialisering: Sørg for at alle data som inkluderes i `detail`-egenskapen er serialiserbare.
• Globalt omfang: Hendelser som sendes ut på `document` er globalt tilgjengelige, noe som kan være både en fordel og en potensiell ulempe.

3. Bruk av Refs og direkte DOM-manipulering (Bruk med forsiktighet)

Selv om det generelt frarådes i React-utvikling, kan direkte tilgang til og manipulering av DOM-en ved hjelp av refs noen ganger være nødvendig for komplekse scenarioer for hendelseshåndtering. Det er imidlertid avgjørende å minimere direkte DOM-manipulering og foretrekke Reacts deklarative tilnærming når det er mulig.

Slik fungerer det:

1. Opprett en ref ved hjelp av `React.createRef()` eller `useRef()`.
2. Fest ref-en til et DOM-element inne i portalen.
3. Få tilgang til DOM-elementet ved hjelp av `ref.current`.
4. Fest hendelseslyttere direkte til DOM-elementet.

Eksempel:

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

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

I dette eksempelet er en ref festet til knappen inne i portalen. En hendelseslytter festes deretter direkte til knappens DOM-element ved hjelp av `buttonRef.current.addEventListener()`. Denne tilnærmingen omgår Reacts hendelsessystem og gir direkte kontroll over hendelseshåndteringen.

Fordeler:

• Direkte kontroll: Gir finkornet kontroll over hendelseshåndtering.
• Omgå Reacts hendelsessystem: Kan være nyttig i spesifikke tilfeller der Reacts hendelsessystem ikke er tilstrekkelig.

Vurderinger:

• Potensial for konflikter: Kan føre til konflikter med Reacts hendelsessystem hvis det ikke brukes forsiktig.
• Vedlikeholdskompleksitet: Gjør koden vanskeligere å vedlikeholde og resonnere om.
• Anti-mønster: Ofte ansett som et anti-mønster i React-utvikling. Bruk sparsomt og kun når det er absolutt nødvendig.

4. Bruk av en delt løsning for tilstandshåndtering (f.eks. Redux, Zustand, Context API)

Hvis komponentene inne i og utenfor portalen trenger å dele tilstand og reagere på de samme hendelsene, kan en delt løsning for tilstandshåndtering være en ren og effektiv tilnærming.

Slik fungerer det:

1. Opprett en delt tilstand ved hjelp av Redux, Zustand eller Reacts Context API.
2. Komponenter inne i portalen kan sende ut handlinger (dispatch actions) eller oppdatere den delte tilstanden.
3. Komponenter utenfor portalen kan abonnere på den delte tilstanden og reagere på endringer.

Eksempel (med React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

I dette eksempelet gir `EventContext` en delt tilstand (`buttonClicked`) og en håndterer (`handleButtonClick`). `PortalContent`-komponenten kaller `handleButtonClick` når knappen klikkes, og `PortalAwareComponent`-komponenten abonnerer på `buttonClicked`-tilstanden og re-rendrer når den endres.

Fordeler:

• Sentralisert tilstandshåndtering: Forenkler tilstandshåndtering og kommunikasjon mellom komponenter.
• Forutsigbar dataflyt: Gir en klar og forutsigbar dataflyt.
• Testbarhet: Gjør koden enklere å teste.

Vurderinger:

• Overhead: Å legge til en løsning for tilstandshåndtering kan introdusere overhead, spesielt for enkle applikasjoner.
• Læringskurve: Krever at man lærer og forstår det valgte biblioteket eller API-et for tilstandshåndtering.

Beste praksis for hendelseshåndtering på tvers av portaler

Når du håndterer hendelser på tvers av portaler, bør du vurdere følgende beste praksis:

• Minimer direkte DOM-manipulering: Foretrekk Reacts deklarative tilnærming når det er mulig. Unngå å manipulere DOM-en direkte med mindre det er absolutt nødvendig.
• Bruk hendelsesdelegering med omhu: Hendelsesdelegering kan være et kraftig verktøy, men sørg for å målrette hendelsens opprinnelse nøye.
• Vurder egendefinerte hendelser: Egendefinerte hendelser kan gi en fleksibel og frakoblet måte å kommunisere mellom komponenter på.
• Velg riktig løsning for tilstandshåndtering: Hvis komponenter trenger å dele tilstand, velg en løsning for tilstandshåndtering som passer til kompleksiteten i applikasjonen din.
• Grundig testing: Test logikken for hendelseshåndtering grundig for å sikre at den fungerer som forventet i alle scenarioer. Vær spesielt oppmerksom på yttertilfeller og potensielle konflikter med andre hendelseslyttere.
• Dokumenter koden din: Dokumenter logikken for hendelseshåndtering tydelig, spesielt når du bruker komplekse teknikker eller direkte DOM-manipulering.

Konklusjon

React Portaler tilbyr en kraftig måte å håndtere UI-elementer som trenger å unnslippe grensene til sine forelderkomponenter. Å håndtere hendelser på tvers av portaler krever imidlertid nøye overveielse og bruk av passende teknikker. Ved å forstå utfordringene og anvende strategier som hendelsesdelegering, egendefinerte hendelser og delt tilstandshåndtering, kan du effektivt avskjære og fange opp hendelser som oppstår inne i portaler og sikre at applikasjonen din oppfører seg som forventet. Husk å prioritere Reacts deklarative tilnærming og minimere direkte DOM-manipulering for å opprettholde en ren, vedlikeholdbar og testbar kodebase.