So erstellen Sie ein dauerhaftes Portal in React

Moderne Front-End-Frameworks basieren alle auf dem Komponentenkonzept, das es uns ermöglicht, unsere Anliegen zu trennen und Front-End-Projekte besser zu entwickeln und zu warten. Normalerweise bilden übergeordnete und untergeordnete Komponenten jedoch auch die Hierarchie von DOM-Elementen ab. Was passiert, wenn Sie eine Komponente über DOM-Knoten hinweg bereitstellen müssen?

In React können wir Portaldies verwenden, was in manchen Fällen sehr nützlich ist. Beispielsweise muss ich anhand eines Status die Position bestimmen, an der die aktuelle untergeordnete Komponente gemountet ist. Im Allgemeinen gibt es Dialogfelder, Vollbildanzeige usw.

Hier ist ein benutzerdefinierter Hook zum Implementieren dieser Funktion:

Hier erstelle ich einen divals Betriebsknoten des Portals und ändere seine Mount-Position, wenn sich die containerÄnderung ändert. Beachten Sie, dass die in meinem letzten Artikel vorgestellten portalRefFunktionen tatsächlich optimiert werden können :useImmutableRefValue

Es sieht also so aus:

import { createPortal } from 'react-dom';
import { useEffect, useCallback } from 'react';
import type { PropsWithChildren, RefObject, FC } from 'react';

import useImmutableRefValue from './useImmutableRefValue';

const usePersistPortal = (container?: HTMLElement | RefObject<HTMLElement>) => {
  const portal = useImmutableRefValue(() => document.createElement('div'));

  useEffect(() => {
    const root =
      container instanceof Element
        ? container
        : container?.current ?? document.body;

    root.appendChild(portal);
    return () => {
      root.removeChild(portal);
    };
  }, [container, portal]);

  const Portal: FC<PropsWithChildren<{}>> = useCallback(
    ({ children }) => createPortal(children, portal),
    [portal],
  );

  return {
    Portal,
  };
};

export default usePersistPortal;

Vielen Dank fürs Lesen, bis zum nächsten Mal, vielen Dank.

Kein Medium-Mitglied? Unterstützen Sie mich hier, indem Sie einer werden .

Weitere Inhalte unter PlainEnglish.io .

Melden Sie sich für unseren kostenlosen wöchentlichen Newsletter an . Folgen Sie uns auf Twitter , LinkedIn , YouTube und Discord .

Sind Sie daran interessiert, Ihr Software-Startup zu skalieren ? Schauen Sie sich Circuit an .