Aus dem Kurs: React Grundkurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.
createPortal – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
createPortal
Unsere Components unterliegen letztendlich den Gesetzen von HTML und CSS. Je tiefer man im HTML verschachtelt, desto mehr potenzielle Beschränkungen unterliegen der Component durch die Styles der darüberliegenden Component. Wenn also die Parent Component bspw. eine Breite von 300 Pixel hat, kann die Kind-Komponente nur eingeschränkt größer werden, ohne das Layout zu zerbrechen. Und deswegen ist es manchmal notwendig, aus der Verschachtelung auszubrechen. Ein solches Beispiel schauen wir uns nun an und lernen dabei, wie React Portal funktioniert. Der vorliegende Code besteht aus zwei Komponenten, der App Component und einer Modal Component. Die Modal Component wird in der App Component gerendert wenn isModalOpen auf true steht. Beim Button-Klick wird openModal aufgerufen und openModal setzt isModalOpen von initial false auf true. Außerdem wird beim Mounten der Component noch ein Keyboard Listener registriert, damit wir das Modal mit der Escape-Taste schließen können. Für das…
Laden Sie Kurse herunter und lernen Sie auch unterwegs.
Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter.