Modal örneği
- React kursu
- Orta seviye
- Ders 62/80
- 4 dk
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.
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 Modal ne ile kontrol edilir?
- useRef
- useMemo
- useState Doğru cevap
- useEffect
Açıklama: Modal açık/kapalı state ile kontrol edilir.
2 Modal açıkken
if (!open) return null;
return createPortal(<div className="modal" onClick={____}><div className="content">{children}</div></div>, modalRoot);if (!open) return null;
return createPortal(<div className="modal" onClick={onClose}><div className="content">{children}</div></div>, modalRoot);Açıklama: Arka plan tıklanınca onClose çağrılır, modal kapanır.
3 Modal örneği: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createPortal |
Farklı düğüme çizer |
open |
Açık/kapalı state |
onClose |
Kapatma işleyici |
backdrop |
Arka plan örtüsü |