React-ում պորտալները ինչու են անհրաժեշտ?

React-ի պորտալները թույլ են տալիս ռենդերել երեխաների կոմպոնենտները այն DOM հանգույցում, որը գտնվում է ծնողական կոմպոնենտի հիերարխիայից դուրս։ Սա օգտակար է, երբ անհրաժեշտ է ցուցադրել տարր մյուսների վրա, օրինակ, մոդալ պատուհաններ, tooltip-ներ կամ բացվող մենյուներ, որպեսզի խուսափել CSS-շերտերի, z-index կամ դիրքավորման խնդիրներից։

Պորտալի օգտագործման օրինակ՝

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

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

Այստեղ մոդալ պատուհանի բովանդակությունը կտեղադրվի 'modal-root' ID-ով տարրում, որը կարող է գտնվել հիմնական հավելվածի արմատից դուրս։