React'da portallar nima uchun kerak?

React portallari, bolalar komponentlarini ota komponentining hierarxiyasidan tashqarida joylashgan DOM tuguniga render qilish imkonini beradi. Bu, masalan, modal oynalar, tooltiplar yoki ochiladigan menyular kabi elementlarni boshqalardan ustunroq ko'rsatish uchun foydalidir, CSS uslublari, z-index yoki pozitsiyalash bilan bog'liq muammolarni oldini olish uchun.

Portaldan foydalanish misoli:

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

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

Bu yerda, modal oynaning mazmuni "modal-root" ID'siga ega elementda render qilinadi, u asosiy ilova ildizidan tashqarida bo'lishi mumkin.