React createPortal: Portale erstellen und Ereignisbehandlung meistern

In der modernen Webentwicklung mit React ist die Erstellung von Benutzeroberflächen, die sich nahtlos in die zugrunde liegende Dokumentstruktur integrieren, von entscheidender Bedeutung. Während das Komponentenmodell von React hervorragend bei der Verwaltung des virtuellen DOM ist, müssen wir manchmal Elemente außerhalb der normalen Komponentenhierarchie rendern. Hier kommt createPortal ins Spiel. Dieser Leitfaden untersucht createPortal im Detail und behandelt seinen Zweck, seine Verwendung sowie fortgeschrittene Techniken zur Ereignisbehandlung und zum Erstellen komplexer UI-Elemente. Wir werden Überlegungen zur Internationalisierung, Best Practices für die Barrierefreiheit und häufige Fallstricke behandeln, die es zu vermeiden gilt.

Was ist React createPortal?

createPortal ist eine React-API, die es Ihnen ermöglicht, die Children einer React-Komponente in einen anderen Teil des DOM-Baums zu rendern, außerhalb der Hierarchie der Elternkomponente. Dies ist besonders nützlich für die Erstellung von Elementen wie Modals, Tooltips, Dropdowns und Overlays, die auf der obersten Ebene des Dokuments oder innerhalb eines bestimmten Containers positioniert werden müssen, unabhängig davon, wo sich die Komponente, die sie auslöst, im React-Komponentenbaum befindet.

Ohne createPortal erfordert dies oft komplexe Umgehungslösungen wie die direkte Manipulation des DOM oder die Verwendung von absoluter CSS-Positionierung, was zu Problemen mit Stapelkontexten, z-index-Konflikten und der Barrierefreiheit führen kann.

Warum createPortal verwenden?

Hier sind die Hauptgründe, warum createPortal ein wertvolles Werkzeug in Ihrem React-Arsenal ist:

• Verbesserte DOM-Struktur: Vermeidet die tiefe Verschachtelung von Komponenten im DOM, was zu einer saubereren und besser verwaltbaren Struktur führt. Dies ist besonders wichtig für komplexe Anwendungen mit vielen interaktiven Elementen.
• Vereinfachtes Styling: Positionieren Sie Elemente einfach relativ zum Viewport oder zu bestimmten Containern, ohne auf komplexe CSS-Tricks angewiesen zu sein. Dies vereinfacht das Styling und das Layout, insbesondere bei Elementen, die andere Inhalte überlagern müssen.
• Verbesserte Barrierefreiheit: Erleichtert die Erstellung barrierefreier UIs, indem Sie den Fokus und die Tastaturnavigation unabhängig von der Komponentenhierarchie verwalten können. Zum Beispiel, um sicherzustellen, dass der Fokus innerhalb eines Modal-Fensters bleibt.
• Bessere Ereignisbehandlung: Ermöglicht die korrekte Weiterleitung von Ereignissen vom Inhalt des Portals zum React-Baum, sodass an übergeordnete Komponenten angehängte Event-Listener wie erwartet funktionieren.

Grundlegende Verwendung von createPortal

Die createPortal-API akzeptiert zwei Argumente:

1. Den React-Knoten (JSX), den Sie rendern möchten.
2. Das DOM-Element, in dem Sie den Knoten rendern möchten. Dieses DOM-Element sollte idealerweise existieren, bevor die Komponente, die createPortal verwendet, gemountet wird.

Hier ist ein einfaches Beispiel:

Beispiel: Rendern eines Modals

Angenommen, Sie haben eine Modal-Komponente, die Sie am Ende des body-Elements rendern möchten.

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

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Geht davon aus, dass Sie ein <div id="modal-root"></div> in Ihrem HTML haben

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  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
              
            
          

Erklärung:

• Wir importieren ReactDOM, da createPortal eine Methode des ReactDOM-Objekts ist.
• Wir gehen davon aus, dass es in Ihrem HTML ein DOM-Element mit der ID modal-root gibt. Hier wird das Modal gerendert. Stellen Sie sicher, dass dieses Element existiert. Eine gängige Praxis ist es, ein <div id="modal-root"></div> direkt vor dem schließenden </body>-Tag in Ihrer index.html-Datei hinzuzufügen.
• Wir verwenden ReactDOM.createPortal, um das JSX des Modals in das modalRoot-Element zu rendern.
• Wir verwenden e.stopPropagation(), um zu verhindern, dass das onClick-Ereignis auf dem Modal-Inhalt den onClose-Handler auf dem Overlay auslöst. Dies stellt sicher, dass ein Klick innerhalb des Modals es nicht schließt.

Verwendung:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Modal öffnen</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal-Inhalt</h2>
        <p>Dies ist der Inhalt des Modals.</p>
        <button onClick={() => setIsModalOpen(false)}>Schließen</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie man ein Modal außerhalb der normalen Komponentenhierarchie rendert, was es Ihnen ermöglicht, es absolut auf der Seite zu positionieren. Die Verwendung von createPortal auf diese Weise löst häufige Probleme mit Stapelkontexten und ermöglicht es Ihnen, ein konsistentes Modal-Styling in Ihrer gesamten Anwendung einfach zu erstellen.

Ereignisbehandlung mit createPortal

Einer der Hauptvorteile von createPortal ist, dass es das normale Event-Bubbling-Verhalten von React beibehält. Das bedeutet, dass Ereignisse, die innerhalb des Portal-Inhalts entstehen, immer noch im React-Komponentenbaum nach oben propagieren, sodass übergeordnete Komponenten sie behandeln können.

Es ist jedoch wichtig zu verstehen, wie Ereignisse behandelt werden, wenn sie die Portal-Grenze überschreiten.

Beispiel: Ereignisbehandlung außerhalb des Portals

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

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Dropdown umschalten</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown-Inhalt
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

Erklärung:

• Wir verwenden eine ref, um auf das im Portal gerenderte Dropdown-Element zuzugreifen.
• Wir fügen dem document einen mousedown-Event-Listener hinzu, um Klicks außerhalb des Dropdowns zu erkennen.
• Innerhalb des Event-Listeners prüfen wir mit dropdownRef.current.contains(event.target), ob der Klick außerhalb des Dropdowns stattgefunden hat.
• Wenn der Klick außerhalb des Dropdowns erfolgte, schließen wir es, indem wir isOpen auf false setzen.

Dieses Beispiel zeigt, wie man Ereignisse behandelt, die außerhalb des Portal-Inhalts auftreten, und ermöglicht es Ihnen, interaktive Elemente zu erstellen, die auf Benutzeraktionen im umgebenden Dokument reagieren.

Fortgeschrittene Anwendungsfälle

createPortal ist nicht auf einfache Modals und Tooltips beschränkt. Es kann in verschiedenen fortgeschrittenen Szenarien eingesetzt werden, darunter:

• Kontextmenüs: Rendern Sie bei einem Rechtsklick dynamisch Kontextmenüs in der Nähe des Mauszeigers.
• Benachrichtigungen: Zeigen Sie Benachrichtigungen am oberen Bildschirmrand an, unabhängig von der Komponentenhierarchie.
• Benutzerdefinierte Popovers: Erstellen Sie benutzerdefinierte Popover-Komponenten mit erweiterter Positionierung und Styling.
• Integration mit Drittanbieter-Bibliotheken: Verwenden Sie createPortal, um React-Komponenten in Drittanbieter-Bibliotheken zu integrieren, die spezifische DOM-Strukturen erfordern.

Beispiel: Erstellen eines Kontextmenüs

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

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Rechtsklick hier, um das Kontextmenü zu öffnen
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

Erklärung:

• Wir verwenden das onContextMenu-Ereignis, um Rechtsklicks auf dem Zielelement zu erkennen.
• Wir verhindern das Erscheinen des Standard-Kontextmenüs mit event.preventDefault().
• Wir speichern die Mauskoordinaten in der State-Variable contextMenu.
• Wir rendern das Kontextmenü in einem Portal, positioniert an den Mauskoordinaten.
• Wir verwenden dieselbe Logik zur Erkennung von Klicks außerhalb wie im vorherigen Beispiel, um das Kontextmenü zu schließen, wenn der Benutzer außerhalb davon klickt.

Überlegungen zur Barrierefreiheit

Bei der Verwendung von createPortal ist es entscheidend, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Anwendung für alle nutzbar ist.

Fokus-Management

Wenn ein Portal geöffnet wird (z. B. ein Modal), sollten Sie sicherstellen, dass der Fokus automatisch auf das erste interaktive Element innerhalb des Portals verschoben wird. Dies hilft Benutzern, die mit einer Tastatur oder einem Screenreader navigieren, leicht auf den Inhalt des Portals zuzugreifen.

Wenn das Portal geschlossen wird, sollten Sie den Fokus auf das Element zurückgeben, das das Öffnen des Portals ausgelöst hat. Dies erhält einen konsistenten Navigationsfluss.

ARIA-Attribute

Verwenden Sie ARIA-Attribute, um semantische Informationen über den Inhalt des Portals bereitzustellen. Verwenden Sie beispielsweise aria-modal="true" auf dem Modal-Element, um anzuzeigen, dass es sich um einen modalen Dialog handelt. Verwenden Sie aria-labelledby, um das Modal mit seinem Titel zu verknüpfen, und aria-describedby, um es mit seiner Beschreibung zu verknüpfen.

Tastaturnavigation

Stellen Sie sicher, dass Benutzer den Inhalt des Portals mit der Tastatur navigieren können. Verwenden Sie das tabindex-Attribut, um die Fokusreihenfolge zu steuern, und stellen Sie sicher, dass alle interaktiven Elemente mit der Tastatur erreichbar sind.

Erwägen Sie, den Fokus innerhalb des Portals zu „fangen“ (trapping), damit Benutzer nicht versehentlich daraus heraus navigieren können. Dies kann erreicht werden, indem auf die Tab-Taste gelauscht und der Fokus programmgesteuert auf das erste oder letzte interaktive Element innerhalb des Portals verschoben wird.

Beispiel: Barrierefreies Modal

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

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Speichern Sie das aktuell fokussierte Element, bevor Sie das Modal öffnen.
      setPreviouslyFocusedElement(document.activeElement);

      // Fokussieren Sie das erste fokussierbare Element im Modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Fangen Sie den Fokus innerhalb des Modals.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Stellen Sie den Fokus auf das Element wieder her, das vor dem Öffnen des Modals den Fokus hatte.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal-Titel</h2>
        <p id={describedBy}>Dies ist der Modal-Inhalt.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Schließen
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

Erklärung:

• Wir verwenden ARIA-Attribute wie aria-modal, aria-labelledby und aria-describedby, um semantische Informationen über das Modal bereitzustellen.
• Wir verwenden den useEffect-Hook, um den Fokus zu verwalten, wenn das Modal geöffnet und geschlossen wird.
• Wir speichern das aktuell fokussierte Element, bevor das Modal geöffnet wird, und stellen den Fokus darauf wieder her, wenn das Modal geschlossen wird.
• Wir fangen den Fokus innerhalb des Modals mit einem keydown-Event-Listener.

Überlegungen zur Internationalisierung (i18n)

Bei der Entwicklung von Anwendungen für ein globales Publikum ist die Internationalisierung (i18n) eine wichtige Überlegung. Bei der Verwendung von createPortal gibt es einige Punkte zu beachten:

• Textrichtung (RTL/LTR): Stellen Sie sicher, dass Ihr Styling sowohl links-nach-rechts (LTR) als auch rechts-nach-links (RTL) Sprachen berücksichtigt. Dies kann die Verwendung von logischen Eigenschaften in CSS (z. B. margin-inline-start anstelle von margin-left) und die entsprechende Einstellung des dir-Attributs auf dem HTML-Element beinhalten.
• Lokalisierung von Inhalten: Alle Texte innerhalb des Portals sollten in die bevorzugte Sprache des Benutzers lokalisiert werden. Verwenden Sie eine i18n-Bibliothek (z. B. react-intl, i18next), um Übersetzungen zu verwalten.
• Zahlen- und Datumsformatierung: Formatieren Sie Zahlen und Daten entsprechend der Ländereinstellung des Benutzers. Die Intl-API bietet hierfür Funktionalitäten.
• Kulturelle Konventionen: Seien Sie sich kultureller Konventionen im Zusammenhang mit UI-Elementen bewusst. Zum Beispiel kann die Platzierung von Schaltflächen in verschiedenen Kulturen unterschiedlich sein.

Beispiel: i18n mit react-intl

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Die FormattedMessage-Komponente von react-intl ruft die übersetzte Nachricht basierend auf der Ländereinstellung des Benutzers ab. Konfigurieren Sie react-intl mit Ihren Übersetzungen für verschiedene Sprachen.

Häufige Fallstricke und Lösungen

Obwohl createPortal ein mächtiges Werkzeug ist, ist es wichtig, sich einiger häufiger Fallstricke und deren Vermeidung bewusst zu sein:

• Fehlendes Portal-Wurzelelement: Stellen Sie sicher, dass das DOM-Element, das Sie als Portal-Wurzel verwenden, existiert, bevor die Komponente, die createPortal verwendet, gemountet wird. Eine gute Praxis ist es, es direkt in der index.html zu platzieren.
• Z-Index-Konflikte: Achten Sie auf z-index-Werte, wenn Sie Elemente mit createPortal positionieren. Verwenden Sie CSS, um Stapelkontexte zu verwalten und sicherzustellen, dass der Inhalt Ihres Portals korrekt angezeigt wird.
• Probleme bei der Ereignisbehandlung: Verstehen Sie, wie Ereignisse durch das Portal propagieren, und behandeln Sie sie entsprechend. Verwenden Sie e.stopPropagation(), um zu verhindern, dass Ereignisse unbeabsichtigte Aktionen auslösen.
• Speicherlecks: Bereinigen Sie Event-Listener und Referenzen ordnungsgemäß, wenn die Komponente, die createPortal verwendet, unmountet wird, um Speicherlecks zu vermeiden. Verwenden Sie den useEffect-Hook mit einer Cleanup-Funktion, um dies zu erreichen.
• Unerwartete Scroll-Probleme: Portale können manchmal das erwartete Scroll-Verhalten der Seite stören. Stellen Sie sicher, dass Ihre Stile das Scrollen nicht verhindern und dass Modal-Elemente beim Öffnen und Schließen keine Seitensprünge oder unerwartetes Scroll-Verhalten verursachen.

Fazit

React.createPortal ist ein wertvolles Werkzeug zur Erstellung flexibler, barrierefreier und wartbarer UIs in React. Indem Sie seinen Zweck, seine Verwendung und fortgeschrittene Techniken zur Behandlung von Ereignissen und zur Barrierefreiheit verstehen, können Sie seine Leistungsfähigkeit nutzen, um komplexe und ansprechende Webanwendungen zu erstellen, die eine überragende Benutzererfahrung für ein globales Publikum bieten. Denken Sie daran, die Best Practices für Internationalisierung und Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Anwendungen inklusiv und für jeden nutzbar sind.

Indem Sie den Richtlinien und Beispielen in diesem Leitfaden folgen, können Sie createPortal selbstbewusst einsetzen, um häufige UI-Herausforderungen zu lösen und beeindruckende Web-Erlebnisse zu schaffen.