React-də portallar nə üçündür?

React-də portallar, uşa komponentlərinin valideyn komponentin hiyerarşisindən kənarda yerləşən DOM düyümündə render olunmasına imkan verir. Bu, məsələn, modal pəncərələr, tooltiplər və ya açılan menyular kimi elementləri digər elementlərin üzərində göstərmək üçün faydalıdır; bu, CSS-stil, z-index və ya mövqeləndirmə ilə bağlı problemlərdən qaçmağa kömək edir.

Portal istifadəsinin nümunəsi:

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 pəncərənin məzmunu "modal-root" ID-li elementdə render olunacaq; bu element, əsas tətbiqin kökündən kənarda yerləşə bilər.