Özet - Portal

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.

Örnek çözümü göster

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;

Kendini test et

Portal olayları nereye gider?
- Hiçbir yere
- Body'ye
- React üst bileşene
- DOM'a
Cevabı göster

React üst bileşene — Portal olayları React ağacında üst bileşene yayılır.
Özet eşleştir

createPortal

Farklı düğüme çizer
open

Açık/kapalı
onClose

Kapatma
stopPropagation

Olay durdurur

Sıradaki ders: useRef ve hesaplama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler