M

MLOG

Türkçe

React Portalları için kapsamlı bir rehber; kullanım alanlarını, uygulamalarını, faydalarını ve standart bileşen hiyerarşisinin dışında içerik oluşturmaya yönelik en iyi uygulamaları kapsar.

React Portalları: İçeriği Bileşen Ağacının Dışında Oluşturma

React portalları, alt bileşenleri, ana bileşenin DOM hiyerarşisinin dışında var olan bir DOM düğümüne oluşturmak için güçlü bir mekanizma sağlar. Bu teknik, modallar, araç ipuçları ve sayfa üzerindeki öğelerin konumlandırılması ve yığılma düzeni üzerinde kesin kontrole ihtiyaç duyduğunuz durumlar gibi çeşitli senaryolarda paha biçilmezdir.

React Portalları Nedir?

Tipik bir React uygulamasında, bileşenler katı bir hiyerarşik yapıda oluşturulur. Üst bileşen alt bileşenleri içerir ve bu böyle devam eder. Ancak, bazen bu yapıdan kurtulmanız gerekir. İşte React portallarının devreye girdiği yer burasıdır. Bir portal, bir bileşenin içeriğini, React ağacındaki bileşenin doğrudan bir alt öğesi olmasa bile, DOM'un farklı bir bölümünde oluşturmanıza olanak tanır.

Uygulamanızın en üst düzeyinde, bileşen ağacında nerede oluşturulduğuna bakılmaksızın görüntülenmesi gereken bir modal bileşeni olduğunu hayal edin. Portallar olmadan, bunu mutlak konumlandırma ve z-indeksi kullanarak başarmaya çalışabilirsiniz, bu da karmaşık stil sorunlarına ve potansiyel çakışmalara yol açabilir. Portallarla, modalin içeriğini, örneğin özel bir "modal-root" öğesi gibi belirli bir DOM düğümüne doğrudan oluşturabilirsiniz, bu da her zaman doğru seviyede oluşturulmasını sağlar.

Neden React Portalları Kullanmalısınız?

React Portalları, web geliştirmedeki çeşitli yaygın zorlukları ele alır:

React Portallar Nasıl Uygulanır

React Portalları kullanmak basittir. İşte adım adım bir rehber:

  1. Bir DOM Düğümü Oluşturun: İlk olarak, portal içeriğini oluşturmak istediğiniz bir DOM düğümü oluşturun. Bu genellikle `index.html` dosyanızda yapılır. Örneğin: 
    <div id="modal-root"></div>
  2. `ReactDOM.createPortal()` Kullanın: React bileşeninizde, içeriği oluşturulan DOM düğümüne oluşturmak için `ReactDOM.createPortal()` yöntemini kullanın. Bu yöntem iki argüman alır: React düğümü (oluşturmak istediğiniz içerik) ve oluşturmak istediğiniz DOM düğümü. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Bu içerik modal-root içinde oluşturulur!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Bileşeni Oluşturun: Portalı içeren bileşeni, diğer herhangi bir React bileşeni gibi oluşturun. 
    function App() {
  return (
    <div>
      <h1>Uygulamam</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Bu örnekte, `MyComponent` içindeki içerik, `App` bileşeni içinde oluşturulmasına rağmen, `modal-root` öğesinin içinde oluşturulacaktır.

Örnek: React Portalları ile Bir Modal Bileşeni Oluşturma

React Portalları kullanarak tam bir modal bileşeni oluşturalım. Bu örnek, modalı açıp kapatmak için temel stil ve işlevsellik içerir.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Kapat</button>
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Uygulamam</h1>
      <button onClick={handleOpenModal}>Modal Aç</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modal İçeriği</h2>
          <p>Bu, modalin içeriğidir.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Bu örnekte:

Modalı ekran üzerinde doğru şekilde konumlandırmak için `modal-overlay` ve `modal` sınıflarına da bazı CSS stilleri eklemeniz gerekir. Örneğin:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

Portallarla Etkinlikleri İşleme

Portallar kullanırken önemli bir husus, etkinliklerin nasıl işlendiğidir. Etkinlik kabarcıklanması, portallar ile standart React bileşenlerinden farklı çalışır.

Bir portal içinde bir etkinlik meydana geldiğinde, her zamanki gibi DOM ağacında yukarı doğru kabarcıklanacaktır. Ancak, React etkinlik sistemi, portalı normal bir React düğümü olarak değerlendirir, bu da etkinliklerin ayrıca portalı içeren React bileşen ağacında da yukarı doğru kabarcıklanacağı anlamına gelir.

Bu, dikkatli olmazsanız bazen beklenmedik davranışlara yol açabilir. Örneğin, yalnızca o bileşen içindeki etkinlikler tarafından tetiklenmesi gereken bir üst bileşende bir etkinlik işleyiciniz varsa, bu, portal içindeki etkinlikler tarafından da tetiklenebilir.

Bu sorunlardan kaçınmak için, etkinliğin daha fazla kabarcıklanmasını önlemek için olay nesnesinde `stopPropagation()` yöntemini kullanabilirsiniz. Alternatif olarak, etkinlik işleyicilerinin ne zaman tetiklendiğini kontrol etmek için React'in sentetik etkinliklerini ve koşullu oluşturmayı kullanabilirsiniz.

Bir etkinliğin üst bileşene kabarcıklanmasını önlemek için `stopPropagation()` kullanmaya bir örnek:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Portal içinde tıklandı!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Bu içerik portal içinde oluşturulur.</div>,
    document.getElementById('portal-root')
  );
}

Bu örnekte, portal içindeki içeriğe tıklamak `handleClick` işlevini tetikleyecektir, ancak etkinlik herhangi bir üst bileşene kabarcıklanmayacaktır.

React Portalları Kullanımı İçin En İyi Uygulamalar

React Portallarla çalışırken akılda tutulması gereken bazı en iyi uygulamalar şunlardır:

React Portallara Alternatifler

React Portalları güçlü bir araç olsa da, benzer sonuçlar elde etmek için kullanabileceğiniz alternatif yaklaşımlar vardır. Bazı yaygın alternatifler şunlardır:

Hangi yaklaşımın kullanılacağı seçimi, uygulamanızın özel gereksinimlerine ve oluşturmaya çalıştığınız UI öğelerinin karmaşıklığına bağlıdır. Öğelerin konumlandırılması ve yığılma düzeni üzerinde kesin kontrole ihtiyacınız olduğunda ve CSS çakışmalarından kaçınmak istediğinizde portallar genellikle en iyi seçenektir.

Küresel Hususlar

Küresel bir kitle için uygulamalar geliştirirken, yerelleştirme, erişilebilirlik ve kültürel farklılıklar gibi faktörleri göz önünde bulundurmak önemlidir. React Portalları bu hususları ele almada rol oynayabilir:

Bu küresel hususları dikkate alarak, çeşitli bir kitle için daha kapsayıcı ve kullanıcı dostu uygulamalar oluşturabilirsiniz.

Sonuç

React Portalları, içeriği standart bileşen ağacının dışında oluşturmak için güçlü ve çok yönlü bir araçtır. Modaller, araç ipuçları ve açılır pencereler gibi yaygın UI desenleri için temiz ve zarif bir çözüm sunarlar. Portalların nasıl çalıştığını anlayarak ve en iyi uygulamaları izleyerek, daha esnek, bakımı kolay ve erişilebilir React uygulamaları oluşturabilirsiniz.

Kendi projelerinizde portalları deneyin ve UI geliştirme iş akışınızı basitleştirebilecek birçok yolu keşfedin. Üretim uygulamalarında portalları kullanırken etkinlik işleme, erişilebilirlik ve küresel hususları göz önünde bulundurmayı unutmayın.

React Portallarında uzmanlaşarak, React becerilerinizi bir sonraki seviyeye taşıyabilir ve küresel bir kitle için daha gelişmiş ve kullanıcı dostu web uygulamaları oluşturabilirsiniz.