Event Propagation
Event Propagation in React Portals behandelt das Verhalten von Ereignissen, die innerhalb von Portals ausgelöst werden und sich durch die DOM-Hierarchie bewegen. Das Verständnis dieses Prozesses ist entscheidend, um unerwartete Nebenwirkungen zu vermeiden und eine präzise Steuerung der Benutzerinteraktionen in Anwendungen mit Portals zu gewährleisten. Durch gezielte Handhabung von Event Propagation lassen sich komplexe UI-Elemente zuverlässig und konsistent implementieren.
Inhaltsverzeichnis
Ein wichtiger Aspekt von Portals, der oft übersehen wird, ist die Handhabung von Events. Obwohl ein Portal seinen DOM-Inhalt an einer anderen Stelle rendert, verhält es sich in Bezug auf Event-Propagation so, als wäre es noch Teil seiner ursprünglichen React-Komponenten-Hierarchie.
Events Bubbling von einem Portal werden durch den React-Komponentenbaum propagiert, nicht durch den DOM-Baum.
Schauen wir uns ein Beispiel an. In diesem Beispiel werden wir ein Klick einmal von einem regulären Component im Komponentenbaum und von einem Component in einem Portal auslösen.
Damit wir einen Einhängepunkt für unser Portal haben, ergänzen wir die index.html und fügen dort ein DIV-Element mit der ID portal-destination ein.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<div id="portal-destination"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>Im nächsten Schritt bauen legen wir eine neue Datei EventPropagationSimple.jsx an und werden darin unser Component und unser Portal erstellen.
import { createPortal } from 'react-dom';
function EventPropagationSimple() {
const handleClick = () => {
console.log('Parent wurde geklickt');
};
return (
<div className="parent" onClick={handleClick}>
<h2>Parent Component</h2>
<p>Klick mich, und der Event-Handler wird ausgelöst.</p>
{createPortal(
<button>Klick mich</button>,
document.getElementById('portal-destination')
)}
</div>
);
}
export default EventPropagationSimple;Als Resultat haben wir folgende DOM-Struktur im Browser.
Wenn wir nun auf das Component <div class="parent">...</div> oder auf den Button “Klick mich” drauf klicken, wird jedes Mal ein Log in der Konsole erzeugt, also in beiden Fällen die Funktion handleClick() ausgeführt.
