Modal örneği

Portal ile taşma sorunları olmayan bir modal yazmayı öğrenirsin.

Modal örneği

Bu derste tam bir modal örneği yazacaksın. Modal, bir açık/kapalı state ile kontrol edilir; açıkken portal ile çizilir, kapalıyken hiç çizilmez. Kullanıcı arka planı tıklarsa modal kapanır.

Modal bileşeni iki öğe çizer: arka plan örtüsü ve içerik kutusu. Örtü yarı saydamdır ve ekranı kaplar; içerik kutusu ortalanmıştır.

State yönetimi üst bileşendedir; modal yalnızca çizim yapar. Bu ayrım modalı yeniden kullanılabilir yapar.

Arka plan örtüsü

Modalın arka plan örtüsü (backdrop) yarı saydam bir katmandır. Ekranı kaplar ve içerik kutusunun arkasında durur. Tıklayınca modalı kapatır; içerik kutusuna tıklamak kapatmaz.

Bu ayrım için içerik kutusuna stopPropagation eklenir; böylece tıklama örtüye yayılmaz. Ya da örtü ve içerik ayrı tıklama işleyicileri kullanır.

Örtü genellikle position: fixed ve inset: 0 ile tüm ekranı kaplar.

Uygulama Modal bileşeni

Aşağıdaki iskeleti tamamla. Modal bileşeni yaz; { open, onClose, children } alsın, open yanlışsa null döndürsün, değilse createPortal ile <div className="modal" onClick={onClose}> içinde {children} ç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

Modal ne ile kontrol edilir?
- useRef
- useMemo
- useState
- useEffect
Cevabı göster

useState — Modal açık/kapalı state ile kontrol edilir.

Modal açıkken

if (!open) return null;
return createPortal(<div className="modal" onClick={____}><div className="content">{children}</div></div>, modalRoot);

Cevabı göster

if (!open) return null;
return createPortal(<div className="modal" onClick={onClose}><div className="content">{children}</div></div>, modalRoot);

Modal örneği: kavramları eşleştir

createPortal

Farklı düğüme çizer
open

Açık/kapalı state
onClose

Kapatma işleyici
backdrop

Arka plan örtüsü

Sıradaki ders: Olay yayılımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler