React-ში პორტალები რა მიზნით გამოიყენება?

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')
  );
}

აქ, მოდალური ფანჯრის შინაარსი იქნება განთავსებული ელემენტში, რომლის ID არის "modal-root", რომელიც შეიძლება იყოს მთავარი აპლიკაციის ძირიდან გარეთ.