Portal nedir?

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.

Örnek çözümü göster

import { createPortal } from "react-dom";

function ModalPortal() {
  return createPortal(
    <div className="modal">Merhaba</div>,
    document.getElementById("modal-root")
  );
}

export default ModalPortal;

Kendini test et

Portal en çok ne için kullanılır?
- Modal
- Liste
- Form
- Tablo
Cevabı göster

Modal — Modal, açılır menü ve bildirimler için kullanılır.

createPortal çağrısı

import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById(____));

Cevabı göster

import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById("modal-root"));

Portal nedir: kavramları eşleştir

createPortal

Farklı düğüme çizer
modal-root

Hedef düğüm
modal

Yaygın kullanım
overflow: hidden

Portal olmayan sorun

Sıradaki ders: Modal örneği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler