React Portallarında Ustalaşmak: Bileşenleri DOM Hiyerarşisinin Ötesinde Oluşturma

Modern web geliştirmenin geniş alanında, React dünya çapında sayısız geliştiriciye dinamik ve son derece etkileşimli kullanıcı arayüzleri oluşturma gücü vermiştir. Bileşen tabanlı mimarisi, karmaşık kullanıcı arayüzü yapılarını basitleştirerek yeniden kullanılabilirliği ve sürdürülebilirliği teşvik eder. Ancak, React'in zarif tasarımına rağmen, geliştiriciler zaman zaman standart bileşen oluşturma yaklaşımının – bileşenlerin çıktılarını ebeveynlerinin DOM elemanı içinde alt öğeler olarak oluşturduğu – önemli sınırlamalar sunduğu senaryolarla karşılaşırlar.

Diğer tüm içeriğin üzerinde görünmesi gereken bir modal diyalog, global olarak gezinen bir bildirim çubuğu veya taşan bir ebeveyn kapsayıcının sınırlarından kaçması gereken bir içerik menüsü düşünün. Bu durumlarda, bileşenleri doğrudan ebeveynlerinin DOM hiyerarşisi içinde oluşturmanın geleneksel yaklaşımı, stil (z-index çakışmaları gibi), düzen sorunları ve olay yayılımı karmaşıklıklarıyla ilgili zorluklara yol açabilir. İşte tam bu noktada React Portalları, bir React geliştiricisinin cephaneliğinde güçlü ve vazgeçilmez bir araç olarak devreye girer.

Bu kapsamlı rehber, React Portal modelini derinlemesine inceliyor; temel kavramlarını, pratik uygulamalarını, gelişmiş hususları ve en iyi uygulamaları araştırıyor. İster deneyimli bir React geliştiricisi olun, ister yolculuğunuza yeni başlıyor olun, portalları anlamak, gerçekten sağlam ve global olarak erişilebilir kullanıcı deneyimleri oluşturmak için yeni olanakların kapısını aralayacaktır.

Temel Zorluğu Anlamak: DOM Hiyerarşisinin Sınırlamaları

React bileşenleri, varsayılan olarak, çıktılarını ebeveyn bileşenlerinin DOM düğümüne oluşturur. Bu, React bileşen ağacı ile tarayıcının DOM ağacı arasında doğrudan bir eşleme oluşturur. Bu ilişki sezgisel ve genellikle faydalı olsa da, bir bileşenin görsel temsilinin ebeveyninin kısıtlamalarından kurtulması gerektiğinde bir engel haline gelebilir.

Yaygın Senaryolar ve Zorlukları:

• Modallar, Diyaloglar ve Lightbox'lar: Bu öğelerin genellikle, bileşen ağacında nerede tanımlandıklarına bakılmaksızın, tüm uygulamanın üzerine gelmesi gerekir. Bir modal derine yuvalanmışsa, CSS `z-index` değeri ataları tarafından kısıtlanabilir, bu da her zaman en üstte görünmesini sağlamayı zorlaştırır. Ayrıca, bir ebeveyn öğedeki `overflow: hidden` özelliği modalın bir kısmını kesebilir.
• Araç İpuçları ve Popover'lar: Modallara benzer şekilde, araç ipuçları veya popover'ların genellikle bir öğeye göre kendilerini konumlandırmaları, ancak potansiyel olarak sınırlı ebeveyn sınırlarının dışına çıkmaları gerekir. Bir ebeveyndeki `overflow: hidden` bir araç ipucunu kesebilir.
• Bildirimler ve Toast Mesajları: Bu global mesajlar genellikle görünüm alanının üstünde veya altında görünür ve onları tetikleyen bileşenden bağımsız olarak oluşturulmalarını gerektirir.
• İçerik Menüleri: Sağ tıklama menüleri veya özel içerik menülerinin, tam görünürlük sağlamak için genellikle sınırlı ebeveyn kapsayıcılarından çıkarak, kullanıcının tıkladığı yerde tam olarak görünmesi gerekir.
• Üçüncü Taraf Entegrasyonları: Bazen, bir React bileşenini, React'in kök dizini dışında, harici bir kütüphane veya eski kod tarafından yönetilen bir DOM düğümüne oluşturmanız gerekebilir.

Bu senaryoların her birinde, istenen görsel sonucu yalnızca standart React oluşturma yöntemini kullanarak elde etmeye çalışmak, genellikle karmaşık CSS, aşırı `z-index` değerleri veya bakımı ve ölçeklendirilmesi zor olan karmaşık konumlandırma mantığına yol açar. İşte bu noktada React Portalları temiz, deyimsel bir çözüm sunar.

React Portalı Tam Olarak Nedir?

Bir React Portalı, çocukları ebeveyn bileşenin DOM hiyerarşisinin dışında var olan bir DOM düğümüne oluşturmak için birinci sınıf bir yol sağlar. Farklı bir fiziksel DOM öğesine oluşturulmasına rağmen, portalın içeriği hala React bileşen ağacında doğrudan bir çocukmuş gibi davranır. Bu, aynı React bağlamını (örneğin, Context API değerleri) koruduğu ve React'in olay köpürme sistemine katıldığı anlamına gelir.

React Portallarının özü `ReactDOM.createPortal()` yönteminde yatar. İmzası basittir:

ReactDOM.createPortal(child, container)

• child: Bir öğe, dize veya parça gibi oluşturulabilir herhangi bir React alt bileşeni.
• container: Belgede zaten var olan bir DOM öğesi. Bu, `child`'ın oluşturulacağı hedef DOM düğümüdür.

`ReactDOM.createPortal()` kullandığınızda, React belirtilen `container` DOM düğümü altında yeni bir sanal DOM alt ağacı oluşturur. Ancak, bu yeni alt ağaç hala mantıksal olarak portalı oluşturan bileşene bağlıdır. Bu "mantıksal bağlantı", olay köpürmesinin ve bağlamın neden beklendiği gibi çalıştığını anlamanın anahtarıdır.

İlk React Portalınızı Kurma: Basit Bir Modal Örneği

Yaygın bir kullanım durumunu ele alalım: bir modal diyalog oluşturma. Bir portal uygulamak için, önce `index.html` dosyanızda (veya uygulamanızın kök HTML dosyasının bulunduğu yerde) portal içeriğinin oluşturulacağı bir hedef DOM öğesine ihtiyacınız vardır.

Adım 1: Hedef DOM Düğümünü Hazırlayın

`public/index.html` dosyanızı (veya eşdeğerini) açın ve yeni bir `div` öğesi ekleyin. Bunu, ana React uygulama kökünüzün dışında, kapanış `body` etiketinden hemen önce eklemek yaygın bir uygulamadır.

<body>
  <!-- Ana React uygulamanızın kök dizini -->
  <div id="root"></div>

  <!-- Portal içeriğimizin render edileceği yer burasıdır -->
  <div id="modal-root"></div>
</body>

Adım 2: Portal Bileşenini Oluşturun

Şimdi, bir portal kullanan basit bir modal bileşeni oluşturalım.

// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Bileşen yüklendiğinde div'i modal köküne ekle
    modalRoot.appendChild(el.current);

    // Temizleme: bileşen kaldırıldığında div'i kaldır
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Boş bağımlılık dizisi, bunun bir kez mount olduğunda ve bir kez unmount olduğunda çalıştığı anlamına gelir

  if (!isOpen) {
    return null; // Modal açık değilse hiçbir şey render etme
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // Üstte olduğundan emin ol
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Modalı Kapat</button>
      </div>
    </div>,
    el.current // Modal içeriğini, modalRoot içindeki oluşturduğumuz div'e render et
  );
};

export default Modal;

Bu örnekte, her modal örneği için yeni bir `div` öğesi (`el.current`) oluşturuyor ve bunu `modal-root`'a ekliyoruz. Bu, birden fazla modalı yönetmemize olanak tanır, böylece birbirlerinin yaşam döngüsü veya içeriğiyle etkileşime girmezler. Gerçek modal içeriği (kaplama ve beyaz kutu) daha sonra `ReactDOM.createPortal` kullanılarak bu `el.current` içine oluşturulur.

Adım 3: Modal Bileşenini Kullanın

// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Modal.js'nin aynı dizinde olduğunu varsayalım

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>React Portal Örneği</h1>
      <p>Bu içerik ana uygulama ağacının bir parçasıdır.</p>
      <button onClick={handleOpenModal}>Global Modalı Aç</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Portaldan Selamlar!</h3>
        <p>Bu modal içeriği 'root' div'inin dışında oluşturulur, ancak yine de React tarafından yönetilir.</p>
      </Modal>
    </div>
  );
}

export default App;

`Modal` bileşeni `App` bileşeni içinde (`root` div'inin içinde) oluşturulsa da, gerçek DOM çıktısı `modal-root` div'i içinde görünür. Bu, modalın `z-index` veya `overflow` sorunları olmadan her şeyin üzerine gelmesini sağlarken, React'in durum yönetimi ve bileşen yaşam döngüsünden faydalanmasını sağlar.

React Portallarının Temel Kullanım Alanları ve Gelişmiş Uygulamaları

Modallar temel bir örnek olsa da, React Portallarının faydası basit açılır pencerelerin çok ötesine uzanır. Portalların zarif çözümler sunduğu daha gelişmiş senaryoları inceleyelim.

1. Güçlü Modallar ve Diyalog Sistemleri

Görüldüğü gibi, portallar modal uygulamasını basitleştirir. Temel avantajlar şunlardır:

• Garantili Z-Index: `body` seviyesinde (veya özel bir üst düzey kapsayıcıda) oluşturularak, modallar derinlemesine yuvalanmış CSS bağlamlarıyla mücadele etmeden her zaman en yüksek `z-index` değerini elde edebilir. Bu, onları tetikleyen bileşenden bağımsız olarak sürekli olarak diğer tüm içeriğin üzerinde görünmelerini sağlar.
• Overflow'dan Kaçış: `overflow: hidden` veya `overflow: auto` özelliğine sahip ebeveynler artık modal içeriğini kesmeyecektir. Bu, büyük modallar veya dinamik içeriğe sahip olanlar için çok önemlidir.
• Erişilebilirlik (A11y): Portallar, erişilebilir modallar oluşturmak için temeldir. DOM yapısı ayrı olsa da, mantıksal React ağacı bağlantısı, uygun odak yönetiminin (odak noktasını modal içinde hapsetme) ve ARIA niteliklerinin (`aria-modal` gibi) doğru bir şekilde uygulanmasına olanak tanır. `react-focus-lock` veya `@reach/dialog` gibi kütüphaneler bu amaçla portallardan yoğun bir şekilde yararlanır.

2. Dinamik Araç İpuçları, Popover'lar ve Açılır Menüler

Modallara benzer şekilde, bu öğelerin genellikle bir tetikleyici öğenin yanında görünmesi, ancak aynı zamanda sınırlı ebeveyn düzenlerinden çıkması gerekir.

• Hassas Konumlandırma: Tetikleyici öğenin görünüm alanına göre konumunu hesaplayabilir ve ardından JavaScript kullanarak araç ipucunu mutlak olarak konumlandırabilirsiniz. Bir portal aracılığıyla oluşturmak, herhangi bir ara ebeveyndeki bir `overflow` özelliği tarafından kırpılmamasını sağlar.
• Düzen Kaymalarından Kaçınma: Bir araç ipucu satır içi olarak oluşturulsaydı, varlığı ebeveyninde düzen kaymalarına neden olabilirdi. Portallar, oluşturma işlemini izole ederek istenmeyen yeniden akışları önler.

3. Global Bildirimler ve Toast Mesajları

Uygulamalar genellikle engellemeyen, geçici mesajları görüntülemek için bir sisteme ihtiyaç duyar (ör. "Ürün sepete eklendi!", "Ağ bağlantısı koptu").

• Merkezi Yönetim: Tek bir "ToastProvider" bileşeni, bir toast mesajları kuyruğunu yönetebilir. Bu sağlayıcı, tüm mesajları `body`'nin üstünde veya altında özel bir `div`'e oluşturmak için bir portal kullanabilir, bu da bir mesajın uygulamada nerede tetiklendiğine bakılmaksızın her zaman görünür ve tutarlı bir şekilde stillendirilmiş olmalarını sağlar.
• Tutarlılık: Karmaşık bir uygulama genelindeki tüm bildirimlerin tek tip görünmesini ve davranmasını sağlar.

4. Özel İçerik Menüleri

Bir kullanıcı bir öğeye sağ tıkladığında, genellikle bir içerik menüsü görünür. Bu menünün tam olarak imleç konumunda konumlandırılması ve diğer tüm içeriğin üzerine gelmesi gerekir. Portallar burada idealdir:

• Menü bileşeni, tıklama koordinatlarını alarak bir portal aracılığıyla oluşturulabilir.
• Tıklanan öğenin ebeveyn hiyerarşisi tarafından kısıtlanmadan, tam olarak gereken yerde görünecektir.

5. Üçüncü Taraf Kütüphaneler veya React Olmayan DOM Öğeleri ile Entegrasyon

Kullanıcı arayüzünün bir kısmının eski bir JavaScript kütüphanesi veya belki de kendi DOM düğümlerini kullanan özel bir haritalama çözümü tarafından yönetildiği mevcut bir uygulamanız olduğunu hayal edin. Böyle bir harici DOM düğümü içinde küçük, etkileşimli bir React bileşeni oluşturmak istiyorsanız, `ReactDOM.createPortal` sizin köprünüzdür.

• Üçüncü taraf tarafından kontrol edilen alan içinde bir hedef DOM düğümü oluşturabilirsiniz.
• Ardından, React kullanıcı arayüzünüzü bu özel DOM düğümüne enjekte etmek için bir portal içeren bir React bileşeni kullanın, böylece React'in bildirimsel gücünün uygulamanızın React olmayan kısımlarını geliştirmesine olanak tanıyın.

React Portallarını Kullanırken Gelişmiş Hususlar

Portallar karmaşık oluşturma sorunlarını çözerken, onları etkili bir şekilde kullanmak ve yaygın tuzaklardan kaçınmak için diğer React özellikleri ve DOM ile nasıl etkileşime girdiklerini anlamak çok önemlidir.

1. Olay Köpürmesi: Önemli Bir Ayrım

React Portallarının en güçlü ve genellikle yanlış anlaşılan yönlerinden biri, olay köpürmesi ile ilgili davranışlarıdır. Tamamen farklı bir DOM düğümüne oluşturulmalarına rağmen, bir portal içindeki öğelerden ateşlenen olaylar, sanki portal yokmuş gibi React bileşen ağacı boyunca yukarı doğru köpürür. Bunun nedeni, React'in olay sisteminin sentetik olması ve çoğu durumda yerel DOM olay köpürmesinden bağımsız çalışmasıdır.

• Anlamı: Bir portal içinde bir düğmeniz varsa ve bu düğmenin tıklama olayı yukarı doğru köpürürse, DOM ebeveynindeki değil, React ağacındaki mantıksal ebeveyn bileşenlerindeki herhangi bir `onClick` işleyicisini tetikleyecektir.
• Örnek: `Modal` bileşeniniz `App` tarafından oluşturuluyorsa, `Modal` içindeki bir tıklama, yapılandırılmışsa `App`'in olay işleyicilerine kadar köpürür. Bu, React'te bekleyeceğiniz sezgisel olay akışını koruduğu için son derece faydalıdır.
• Yerel DOM Olayları: Doğrudan yerel DOM olay dinleyicileri eklerseniz (örneğin, `document.body` üzerinde `addEventListener` kullanarak), bunlar yerel DOM ağacını takip edecektir. Ancak, standart React sentetik olayları (`onClick`, `onChange`, vb.) için React mantıksal ağacı geçerlidir.

2. Context API ve Portallar

Context API, React'in prop-drilling yapmadan bileşen ağacı boyunca değerleri (temalar, kullanıcı kimlik doğrulama durumu gibi) paylaşma mekanizmasıdır. Neyse ki, Context portallarla sorunsuz bir şekilde çalışır.

• Bir portal aracılığıyla oluşturulan bir bileşen, mantıksal React bileşen ağacındaki ataları olan context sağlayıcılarına hala erişebilir.
• Bu, `App` bileşeninizin en üstünde bir `ThemeProvider`'ınız olabileceği ve bir portal aracılığıyla oluşturulan bir modalın hala bu tema bağlamını miras alacağı anlamına gelir, bu da portal içeriği için global stil ve durum yönetimini basitleştirir.

3. Portallarla Erişilebilirlik (A11y)

Erişilebilir kullanıcı arayüzleri oluşturmak global kitleler için çok önemlidir ve portallar, özellikle modallar ve diyaloglar için belirli A11y hususlarını beraberinde getirir.

• Odak Yönetimi: Bir modal açıldığında, kullanıcıların (özellikle klavye ve ekran okuyucu kullanıcılarının) arkasındaki öğelerle etkileşime girmesini önlemek için odak modal içinde hapsedilmelidir. Modal kapandığında, odak onu tetikleyen öğeye geri dönmelidir. Bu genellikle dikkatli JavaScript yönetimi gerektirir (örneğin, odaklanılabilir öğeleri yönetmek için `useRef` kullanmak veya `react-focus-lock` gibi özel bir kütüphane kullanmak).
• Klavye Navigasyonu: `Esc` tuşunun modalı kapattığından ve `Tab` tuşunun odağı yalnızca modal içinde dolaştırdığından emin olun.
• ARIA Nitelikleri: Portal içeriğinizin amacını ve yapısını yardımcı teknolojilere iletmek için `role="dialog"`, `aria-modal="true"`, `aria-labelledby` ve `aria-describedby` gibi ARIA rollerini ve özelliklerini doğru bir şekilde kullanın.

4. Stil Zorlukları ve Çözümleri

Portallar DOM hiyerarşisi sorunlarını çözerken, tüm stil karmaşıklıklarını sihirli bir şekilde çözmezler.

• Global ve Kapsamlı Stiller: Portal içeriği global olarak erişilebilir bir DOM düğümüne (`body` veya `modal-root` gibi) oluşturulduğundan, herhangi bir global CSS kuralı potansiyel olarak onu etkileyebilir.
• CSS-in-JS ve CSS Modülleri: Bu çözümler, stilleri kapsüllemeye ve istenmeyen sızıntıları önlemeye yardımcı olabilir, bu da onları portal içeriğini stillendirirken özellikle kullanışlı hale getirir. Styled Components, Emotion veya CSS Modülleri benzersiz sınıf adları oluşturarak, global olarak oluşturulmalarına rağmen modalınızın stillerinin uygulamanızın diğer bölümleriyle çakışmamasını sağlar.
• Temalama: Context API ile belirtildiği gibi, temalama çözümünüzün (ister CSS değişkenleri, ister CSS-in-JS temaları veya bağlam tabanlı temalama olsun) portal alt öğelerine doğru şekilde yayıldığından emin olun.

5. Sunucu Taraflı Oluşturma (SSR) Hususları

Uygulamanız Sunucu Taraflı Oluşturma (SSR) kullanıyorsa, portalların nasıl davrandığına dikkat etmeniz gerekir.

• `ReactDOM.createPortal`, `container` argümanı olarak bir DOM öğesi gerektirir. Bir SSR ortamında, ilk oluşturma, tarayıcı DOM'unun olmadığı sunucuda gerçekleşir.
• Bu, portalların genellikle sunucuda oluşturulmayacağı anlamına gelir. Yalnızca JavaScript istemci tarafında yürütüldüğünde "hydrate" olacak veya oluşturulacaklardır.
• İlk sunucu oluşturmasında kesinlikle mevcut olması gereken içerik için (örneğin, SEO veya kritik ilk boyama performansı için), portallar uygun değildir. Ancak, genellikle bir eylem onları tetikleyene kadar gizli olan modallar gibi etkileşimli öğeler için bu nadiren bir sorundur. Bileşenlerinizin, varlığını kontrol ederek (örneğin, `document.getElementById('modal-root')`) sunucudaki portal `container`'ının yokluğunu zarif bir şekilde ele aldığından emin olun.

6. Portalları Kullanan Bileşenleri Test Etme

Portallar aracılığıyla oluşturulan bileşenleri test etmek biraz farklı olabilir, ancak React Testing Library gibi popüler test kütüphaneleri tarafından iyi desteklenir.

• React Testing Library: Bu kütüphane varsayılan olarak `document.body`'yi sorgular, bu da portal içeriğinizin muhtemelen bulunacağı yerdir. Bu nedenle, modalınız veya araç ipucunuz içindeki öğeleri sorgulamak genellikle "sadece çalışır".
• Mocking (Taklit Etme): Bazı karmaşık senaryolarda veya portal mantığınız belirli DOM yapılarına sıkı sıkıya bağlıysa, test ortamınızda hedef `container` öğesini taklit etmeniz veya dikkatlice ayarlamanız gerekebilir.

React Portallarının Yaygın Tuzakları ve En İyi Uygulamaları

React Portallarını kullanımınızın etkili, sürdürülebilir ve performanslı olmasını sağlamak için bu en iyi uygulamaları göz önünde bulundurun ve yaygın hatalardan kaçının:

1. Portalları Aşırı Kullanmayın

Portallar güçlüdür, ancak akıllıca kullanılmalıdır. Bir bileşenin görsel çıktısı DOM hiyerarşisini bozmadan (örneğin, taşmayan bir ebeveyn içinde göreceli veya mutlak konumlandırma kullanarak) elde edilebiliyorsa, bunu yapın. Portallara aşırı güvenmek, dikkatli bir şekilde yönetilmezse DOM yapısının hata ayıklamasını bazen karmaşıklaştırabilir.

2. Uygun Temizliği (Unmounting) Sağlayın

Portalınız için dinamik olarak bir DOM düğümü oluşturuyorsanız (`Modal` örneğimizdeki `el.current` gibi), portalı kullanan bileşen kaldırıldığında onu temizlediğinizden emin olun. `useEffect` temizleme işlevi bunun için mükemmeldir, bellek sızıntılarını önler ve DOM'u sahipsiz öğelerle doldurmaktan kaçınır.

useEffect(() => {
  // ... el.current'ı ekle
  return () => {
    // ... el.current'ı kaldır;
  };
}, []);

Her zaman sabit, önceden var olan bir DOM düğümüne (tek bir `modal-root` gibi) oluşturuyorsanız, *düğümün kendisinin* temizlenmesi gerekmez, ancak ebeveyn bileşen kaldırıldığında *portal içeriğinin* doğru şekilde kaldırılması hala React tarafından otomatik olarak yönetilir.

3. Performans Değerlendirmeleri

Çoğu kullanım durumu (modallar, araç ipuçları) için portalların ihmal edilebilir bir performans etkisi vardır. Ancak, bir portal aracılığıyla son derece büyük veya sık güncellenen bir bileşen oluşturuyorsanız, diğer herhangi bir karmaşık bileşen için yapacağınız gibi normal React performans optimizasyonlarını (`React.memo`, `useCallback`, `useMemo` gibi) göz önünde bulundurun.

4. Her Zaman Erişilebilirliğe Öncelik Verin

Vurgulandığı gibi, erişilebilirlik kritiktir. Portal tarafından oluşturulan içeriğinizin ARIA yönergelerini takip ettiğinden ve tüm kullanıcılar, özellikle klavye navigasyonuna veya ekran okuyuculara dayananlar için sorunsuz bir deneyim sağladığından emin olun.

• Modal odak hapsetme: Klavye odağını açık modal içinde hapseden bir kütüphane uygulayın veya kullanın.
• Açıklayıcı ARIA nitelikleri: Modal içeriğini başlığı ve açıklamasıyla ilişkilendirmek için `aria-labelledby`, `aria-describedby` kullanın.
• Klavye ile kapatma: `Esc` tuşu ile kapatmaya izin verin.
• Odağı geri yükleme: Modal kapandığında, odağı onu açan öğeye geri döndürün.

5. Portallar İçinde Anlamsal HTML Kullanın

Portal, içeriği görsel olarak herhangi bir yere oluşturmanıza izin verirken, portalınızın alt öğeleri içinde anlamsal HTML öğeleri kullanmayı unutmayın. Örneğin, bir diyalog bir `

// Basit bir PortalWrapper örneği
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // eğer wrapperId ile bir eleman yoksa, oluştur ve body'ye ekle
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Programatik olarak oluşturulan elemanı sil
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;