Kam skirti portalai React?

React portalai leidžia atvaizduoti vaikų komponentus DOM mazge, kuris yra už tėvo komponento hierarchijos ribų. Tai naudinga, kai reikia rodyti elementą virš kitų, pavyzdžiui, modalius langus, įrankių patarimus ar išskleidžiamus meniu, siekiant išvengti CSS stilių, z-index ar pozicionavimo problemų.

Pavyzdys, kaip naudoti portalą:

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

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

Čia modalo turinys bus atvaizduotas elemente su ID "modal-root", kuris gali būti už pagrindinio programos šaknies.