Kam domāti portāli React?

React portāli ļauj attēlot bērnu komponentus DOM mezglā, kas atrodas ārpus vecāka komponenta hierarhijas. Tas ir noderīgi, ja nepieciešams parādīt elementu virs citiem, piemēram, modālos logus, rīkjoslas vai nolaižamos izvēlnes, lai izvairītos no CSS stilu, z-index vai pozicionēšanas problēmām.

Portāla lietošanas piemērs:

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

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

Šeit modālais logs tiks attēlots elementā ar ID "modal-root", kas var atrasties ārpus galvenās lietojumprogrammas saknes.