React'teki порталар эмне үчүн керек?

React порталдары балдар компонеттерин ата-эненин хиерархиясынан тышкары жайгашкан DOM түйүнүнө чийүү мүмкүнчүлүгүн берет. Бул башка элементтердин үстүнө көрсөтүү керек болгон учурда пайдалуу, мисалы, модал терезелер, тултиптер же түшүп турган менюлар, 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 менен белгиленген элементте көрсөтүлөт, ал негизги тиркеменин тамырынан тышкары жайгашкан болушу мүмкүн.