<div>
außerhalb der tatsächlichen Anwendung gerendert werden.createPortal()
-Methode aus ReactDOM aufrufen, ihr eine gültige Komponente als ersten und eine (existierende) Ziel-Node als zweiten Parameter übergeben.<App />
in das div
mit der id root
rendern, sähe der <body>
unserer obigen App nun entsprechend wie folgt aus:<div id="root">
landen. Außer eben, es handelt sich um ein Portal. Eine solche Komponente würde dann so aussehen:ReactDOM.createPortal()
-Aufruf, den wir dann statt des reinen JSX aus der Komponente (bzw. aus der render()
-Methode bei Class Components) zurückgeben. Ergänzen wir unsere Beispiel-App von oben, sähe die Benutzung wie folgt aus:<body>
unseres HTML-Dokuments ist dann folgender:#portal
-Node gerendert statt in die #root
-Node, in der sich die Komponente befindet. Dabei wird ein Portal immer dann gerendert, wenn die Komponente gemounted wird und folglich auch wieder aus dem DOM entfernt, wenn die Komponente, die das Portal enthält, aus dem Komponenten-Baum entfernt wird.modalIsOpen
in der Eltern-Komponente entsprechend auf true
oder false
. Die ModalPortal
-Komponente rendern wir über ein &&
-Conditional in JSX, also nur dann, wenn der Wert von this.state.modalIsOpen
auch tatsächlich true
ist.false
auf true
wechselt, wird die ModalPortal
-Komponente gemounted und das Modal-Popup wird mit einem leicht transparenten schwarzen Hintergrund in das <div id="portal">
gerendert. Wechselt der Wert von true
zurück auf false
, nehmen wir es in der App-Komponente aus der Komponenten-Hierarchie heraus und React sorgt dann automatisch dafür, dass sich die ModalPortal
-Komponente mitsamt ihres Inhalts nicht mehr in der Seite befindet.this.closeModal
Methode. Diese wird als Methode der App-Komponente definiert, wird aber innerhalb der ModalPortal
-Komponente beim Klick auf den „Modal schließen“-Button im Kontext der App
-Komponente aufgerufen. modalIsOpen
State der Komponente verändern. Und das, obwohl die Komponente sich gar nicht innerhalb <div id="root>
befindet wie der Rest unserer kleinen App. Dies ist möglich, da es sich eben um ein Portal handelt, deren Inhalt sich aus React-Sicht im selben Komponenten-Baum wie die App selbst befindet, nicht jedoch aus HTML-Sicht.