Modallar ve Araç İpuçları için Portallar
Alt bileşenleri farklı bir DOM düğümünde işlemek için ReactDOM.createPortal kullanarak overflow:hidden kapsayıcılarından taşabilen modallar ve araç ipuçları oluşturmayı öğrenin.
Modallar ve Araç İpuçları için Portallar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Kapsayıcıdan Kaçış Sorunu
Kalıcı pencereler ve araç ipuçları, üst bileşenlerinin overflow:hidden, z-index yığınlama ve dönüşüm köklü bağlamlarından kaçmak için DOM'un en üstünde oluşturulmalıdır. Çözüm: portallar.
createPortal API'si
createPortal(children, container), children öğelerini herhangi bir DOM düğümü olan container içine oluştururken olaylar ve bağlam açısından bunları mantıksal olarak React bileşeninin alt öğeleri olarak tutar.
import { createPortal } from 'react-dom';
function Modal({ children, onClose }) {
return createPortal(
<div className="modal-backdrop" onClick={onClose}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
{children}
</div>
</div>,
document.body
);
}Portal Kapsayıcıları
Yaygın hedefler: document.body, index.html içindeki özel bir #modal-root div'i veya ihtiyaç üzerine oluşturulan ve ref ile alınan bir kapsayıcı.
<!-- index.html -->
<div id="root"></div>
<div id="modal-root"></div>
// component:
const modalRoot = document.getElementById('modal-root');
return createPortal(<div>...</div>, modalRoot);Neden Doğrudan Yerinde Oluşturmamalı
Üst bileşende overflow: hidden varsa alt kalıcı pencere kırpılır. Üst bileşende transform: scale varsa kalıcı pencerenin sabit konumlandırması üst bileşene göreli olur. Portallar tüm bu sorunları önler.
Olaylar Yine de Yayılır
DOM'un başka bir yerinde oluşturulmalarına rağmen React olayları DOM ağacında değil, bileşen ağacında yayılır. Portal içindeki bir tıklama, üst React bileşenlerindeki onClick işleyicilerine ulaşmaya devam eder.
Kaplama Tıklamasıyla Kapatma
İçerideki tıklamaların kalıcı pencereyi kapatmaması için kalıcı pencere içeriğinde olay yayılımını durdurun.
function Modal({ onClose, children }) {
return createPortal(
<div className="backdrop" onClick={onClose}>
<div className="content" onClick={e => e.stopPropagation()}>
{children}
</div>
</div>,
document.body
);
}Escape Tuşuyla Kapatma
Kalıcı pencere açıkken bir tuş basma dinleyicisi ekleyin ve bileşen kaldırıldığında bu dinleyiciyi kaldırın.
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);Portallarda Odak Yönetimi
Kalıcı pencere açıldığında odağı içine taşıyın, kapanana kadar odağı sınırlayın ve ardından odağı pencereyi açan öğeye geri getirin. Bunu yeniden uygulamak zorunda kalmamak için focus-trap-react gibi bir kütüphane kullanın.
Yerleşik dialog Öğesi
HTML'nin <dialog> öğesi, kalıcı pencere konumlandırmasını, arka planı, odak sınırlamasını ve Escape ile kapatmayı yerel olarak yönetir. Çoğu kalıcı pencere için portal yerine daha iyi bir başlangıç noktasıdır.
function Modal({ open, onClose, children }) {
const ref = useRef(null);
useEffect(() => {
if (open) ref.current?.showModal();
else ref.current?.close();
}, [open]);
return (
<dialog ref={ref} onClose={onClose}>
{children}
</dialog>
);
}Araç İpuçları ve Açılır Pencereler
Araç ipuçları bir bağlantı öğesine göre konumlandırılır. Portal, bunların yığınlama bağlamlarından kaçmasını sağlar. Çakışma algılama, yön değiştirme ve konumlandırma için floating-ui ile birlikte kullanın.
import { useFloating, autoUpdate } from '@floating-ui/react';
function Tooltip({ children, content }) {
const { refs, floatingStyles } = useFloating({ whileElementsMounted: autoUpdate });
const [open, setOpen] = useState(false);
return (
<>
<button ref={refs.setReference} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
{children}
</button>
{open && createPortal(
<div ref={refs.setFloating} style={floatingStyles}>{content}</div>,
document.body
)}
</>
);
}SSR Uyarısı
document sunucuda mevcut değildir. Ya yalnızca istemcide oluşturun (typeof window denetimi yapın) ya da Next.js'in ssr:false seçeneğiyle dinamik özelliğini kullanın.
Erişilebilirlik: aria-modal
Kalıcı pencere kapsayıcılarında role="dialog", aria-modal="true" ve kalıcı pencerenin başlığına işaret eden aria-labelledby bulunmalıdır. Alternatif olarak yerel <dialog> öğesini kullanın.
Hızlı Kontrol
Kalıcı pencereleri bileşen ağacında yerinde oluşturmak yerine neden createPortal kullanmalısınız?
Özet: Portallar
createPortal(children, container), DOM'u başka bir yerde oluştururken mantıksal React ağacını korur. overflow, transform ve z-index kaynaklı kaçış sorunlarını çözer. Olaylar React ağacında yayılmaya devam eder. Escape ile kapatmayı ve odak yönetimini ekleyin. Yerel <dialog> öğesi, kalıcı pencereler için bunların çoğunu yönetir. Araç ipuçları için floating-ui ile birleştirin. SSR'ı unutmayın (typeof window denetimi).
Sıkça Sorulan Sorular
“Modallar ve Araç İpuçları için Portallar” dersi ücretsiz mi?
Evet — “Modallar ve Araç İpuçları için Portallar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Modallar ve Araç İpuçları için Portallar” dersinde ne öğreneceğim?
Alt bileşenleri farklı bir DOM düğümünde işlemek için ReactDOM.createPortal kullanarak overflow:hidden kapsayıcılarından taşabilen modallar ve araç ipuçları oluşturmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Modallar ve Araç İpuçları için Portallar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Context ile Birleşik Bileşenler
- Render Özellikleri ve HOC Kalıpları
- Modallar ve Araç İpuçları için Portallar
- Hata Sınırları