Ποιος είναι ο σκοπός των portals στο 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')
  );
}

Εδώ, το περιεχόμενο του παραθύρου διαλόγου θα αποδοθεί στο στοιχείο με id "modal-root", το οποίο μπορεί να βρίσκεται εκτός του κύριου ριζικού στοιχείου της εφαρμογής.