Özet - Portal
- React kursu
- Orta seviye
- Ders 64/80
- 5 dk
Bir onay penceresini portal ile kök dışında çizilen bir modal yaparsın.
Özet - Portal
Bu grupta portalın ne olduğunu, modal örneğini ve olay yayılımını öğrendin. createPortal bileşeni DOM'un farklı yerine çizer; open ve onClose ile modal kontrol edilir; stopPropagation içerik tıklamasını örtüye yayılmaz.
Portal, modal ve açılır menüler gibi öğelerin üst bileşen stilllerinden etkilenmeden çizilmesini sağlar. Olay yayılımı sayesinde üst bileşen state'i rahatça yönetebilir. Son adımda üç aracı birleştirip tam bir modal yazacaksın.
Uygulama Özet modal
Aşağıdaki iskeleti tamamla. Modal bileşeni yaz; { open, onClose, children } alsın, open yanlışsa null, değilse createPortal ile <div className="modal" onClick={onClose}>{children}</div> çizsin. Dışa aktar.
Başlangıç kodu
import { createPortal } from "react-dom";
// Modal bileşenini buraya yazÖrnek çözüm
import { createPortal } from "react-dom";
function Modal({ open, onClose, children }) {
if (!open) return null;
return createPortal(
<div className="modal" onClick={onClose}>{children}</div>,
document.getElementById("modal-root")
);
}
export default Modal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Portal olayları nereye gider?
- Hiçbir yere
- Body'ye
- React üst bileşene Doğru cevap
- DOM'a
Açıklama: Portal olayları React ağacında üst bileşene yayılır.
2 Özet eşleştir
| Kavram | Anlamı |
|---|---|
createPortal |
Farklı düğüme çizer |
open |
Açık/kapalı |
onClose |
Kapatma |
stopPropagation |
Olay durdurur |