React'te portallar ne işe yarar?

React'te portallar, çocuk bileşenleri ana bileşenin hiyerarşisi dışında bulunan bir DOM düğümüne render etmeye olanak tanır. Bu, modallar, araç ipuçları veya açılır menüler gibi diğerlerinin üzerinde gösterilmesi gereken öğeleri göstermek için faydalıdır; böylece CSS stilleri, z-index veya konumlandırma sorunlarından kaçınılır.

Bir portal kullanım örneği:

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Burada, modal içeriği "modal-root" ID'sine sahip elementte render edilecektir; bu element, uygulamanın ana kökünden ayrı olabilir.