React
Olay yayılımı
Portal'da olayların yine de bileşene ulaştığını öğrenirsin.
Olay yayılımı
Portal çizim açısından farklı yerde olsa da React ağacında üst bileşeninin çocuğudur. Bu yüzden olaylar (click, change gibi) üst bileşene yayılır.
Bu davranış modal için yararlıdır: modal içindeki bir buton tıklandığında olay üst bileşene gider ve üst bileşen state'i güncelleyebilir. Portal olmasaydı olay modalın bulunduğu DOM dallarında kalırdı.
Olay yayılımını durdurmak için e.stopPropagation() kullanılır; bu, örtü tıklamasının içerik kutusuna yayılmasını önler.
stopPropagation kullanımı
Modalda içerik kutusuna tıklamak örtüyü tetiklememelidir. Bunun için içerik kutusunun tıklama işleyicisi e.stopPropagation() çağırır; böylece olay örtüye yayılmaz ve modal kapanmaz.
Ancak örtüye doğrudan tıklanırsa olay yayılır ve onClose çağrılır. Bu ayrım, kullanıcının içerikle etkileşimini bozmadan modalı kapatma kolaylığı sağlar.
Aynı desen açılır menülerde de kullanılır: menü içine tıklama kapatmaz, dışına tıklama kapatır.
Uygulama Modal stopPropagation
Aşağıdaki iskeleti tamamla. Modal bileşeni yaz; { open, onClose, children } alsın, open yanlışsa null, değilse createPortal ile bir dış <div className="modal" onClick={onClose}> ve iç <div className="content" onClick={(e) => e.stopPropagation()}>{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}>
<div className="content" onClick={(e) => e.stopPropagation()}>{children}</div>
</div>,
document.getElementById("modal-root")
);
}
export default Modal;
Kendini test et
-
Portal olayları nereye yayılır?
- DOM üst düğümüne
- React üst bileşene
- Body'ye
- Hiçbir yere
Cevabı göster
React üst bileşene — Portal olayları React ağacında üst bileşene yayılır.
-
Olay durdurma
function Box({ children }) {
return <div onClick={(e) => { e.____(); handleClick(); }}>{children}</div>;
}
Cevabı göster
function Box({ children }) {
return <div onClick={(e) => { e.stopPropagation(); handleClick(); }}>{children}</div>;
}
-
Olay yayılımı: kavramları eşleştir
- createPortal
- Farklı düğüme çizer
- stopPropagation
- Olay durdurur
- React ağacı
- Olay yolu
- onClose
- Kapatma işleyici
Sıradaki ders: Özet - Portal
