Portal nedir?
- React kursu
- Orta seviye
- Ders 61/80
- 4 dk
createPortal ile bir bileşeni DOM ağacının başka yerine çizmeyi öğrenirsin.
Portal nedir?
Normalde bir bileşen çizildiği yere DOM'a eklenir. Portal, bir bileşeni DOM ağacının farklı bir yerine çizmeni sağlar. ReactDOM.createPortal ile yapılır.
En yaygın kullanım: modal, açılır menü ve bildirimler. Bu öğeler genellikle sayfanın en üstüne, tüm içerikten bağımsız olarak çizilir. Portal olmadan üst bileşenin overflow: hidden gibi stilleri modalı kesebilir.
Portal çizim açısından farklı yerde olur ama React ağacında üst bileşeninin çocuğu kalır; olaylar üst bileşene yayılır.
Modal örneği
Bir modal için portal kullanmak yaygındır. Önce HTML'de bir div id="modal-root" tanımlarsın; uygulamanın kök dışında, body'nin doğrudan çocuğu olarak. Modal bileşeni bu düğüme portal ile çizilir.
Böylece modal, üst bileşenin stillerinden etkilenmez. position: fixed ile ekranı kaplar; z-index ile en üstte durur. Tıklayınca kapanma gibi davranışlar üst bileşende tanımlanır.
Modal kapandığında portal içeriği DOM'dan kaldırılır; bu otomatik bir temizlik sağlar.
Uygulama Modal portal
Aşağıdaki iskeleti tamamla. ModalPortal bileşeni yaz; createPortal ile <div className="modal">Merhaba</div> öğesini document.getElementById("modal-root") düğümüne çiz. Dışa aktar.
Başlangıç kodu
import { createPortal } from "react-dom";
// ModalPortal bileşenini buraya yazÖrnek çözüm
import { createPortal } from "react-dom";
function ModalPortal() {
return createPortal(
<div className="modal">Merhaba</div>,
document.getElementById("modal-root")
);
}
export default ModalPortal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Portal en çok ne için kullanılır?
- Modal Doğru cevap
- Liste
- Form
- Tablo
Açıklama: Modal, açılır menü ve bildirimler için kullanılır.
2 createPortal çağrısı
import { createPortal } from "react-dom";
return createPortal(<Modal />, document.getElementById(____));import { createPortal } from "react-dom";
return createPortal(<Modal />, document.getElementById("modal-root"));Açıklama: createPortal(jsx, container) ikinci argüman hedef düğümü alır.
3 Portal nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createPortal |
Farklı düğüme çizer |
modal-root |
Hedef düğüm |
modal |
Yaygın kullanım |
overflow: hidden |
Portal olmayan sorun |