javascript / intermediate
Snippet
Rendern mit React Portals
Portals ermöglichen es, Kinder in einen DOM-Knoten zu rendern, der außerhalb der Hierarchie der Elternkomponente existiert. Dies wird häufig für Modals, Tooltips oder Dropdowns verwendet, um CSS-Probleme mit overflow: hidden oder z-index zu vermeiden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createPortal } from 'react-dom';const Modal = ({ isOpen, children, onClose }) => {if (!isOpen) return null;return createPortal(<div className="modal-overlay"><div className="modal-content">{children}<button onClick={onClose}>Close</button></div></div>,document.body);};
react
Erklärung
1
createPortal(children, document.body)
Das erste Argument ist der zu rendernde Inhalt, das zweite ist der Ziel-DOM-Knoten außerhalb des aktuellen Baums.
2
document.body
Ein häufiges Ziel für Portals, das sicherstellt, dass das Element auf der obersten Ebene der DOM-Struktur liegt.