Funktionskomponente des Reaktionsportals

Eine erstklassige Methode, Kinder in einen DOM-Knoten zu rendern, der ausserhalb der DOM-Hierarchie der Elternkomponente liegt, bieten Portale. In diesem Artikel erfahren Sie, wie Sie die funktionalen Komponenten des Portals von ReactJS verwenden.

Funktionale Komponente des React-Portals in ReactJS

Im Wesentlichen montieren wir unser App-Element über unserem Root-Element. Die Verwendung eines div-Elements mit der id-Wurzel als primäres DOM-Element ist praktisch Standard geworden.

Jede React-Komponente in unserer Anwendung ist unter dem Element root zu finden, das sich innerhalb eines Satzes befindet, wenn Sie sich den DOM-Baum des Browsers ansehen. Trotzdem erlauben uns React Portals, diesen DOM-Baum zu verlassen und eine Komponente auf einen DOM-Knoten zu rendern, der nicht unter diesem root-Element liegt.

Dies verstößt gegen eine Eltern-Kind-Hierarchie und erfordert, dass eine Komponente als neues Element präsentiert wird.

Syntax:

ReactDOM.createPortal(child, container)

1. Das erste Argument ist ein Kind, das alles Renderbare sein kann, wie z. B. ein Element, ein String oder ein Fragment (Kind).
2. Der container ist ein DOM-Element und das zweite Argument.

Die untergeordneten Komponenten müssen den übergeordneten Container visuell verlassen. Unten wird einer der häufigsten Anwendungsfälle des Portals gezeigt.

1. Dialogfelder mit Modalen
2. Hovercards
3. Schwebende Menüs
4. QuickInfos
5. Lader

Beachten Sie bei der Verwendung von Reaktionsportalen Folgendes. Wenn Sie niemanden kennenlernen, sind diese Tendenzen nicht sofort erkennbar.

1. Unabhängig davon, wo sich der Portal-Knoten im DOM befindet, funktioniert das Event-Bubbling wie vorgesehen, indem es Events an die Vorgänger des React-Baums weiterleitet.
2. React steuert immer noch den Lebenszyklus von untergeordneten Elementen, wenn sie über Portale gerendert werden.
3. Der React-Komponentenbaum wird vom Portal nicht beeinflusst, das nur die HTML-DOM-Struktur ändert.
4. Bei der Verwendung von Portalen müssen Sie als Einhängepunkt für die Portalkomponente ein HTML DOM element angeben.

Lassen Sie uns das folgende Beispiel verwenden, um die erwähnte Idee zu verstehen.

Code:

const PortalModal = ({message, isModalOpen, onClose}) => {
  if (!isModalOpen) return null;
  return ReactDOM.createPortal(
     <div className='modal'>
      <p>{message}</p>
      <button onClick={onClose}>X</button>
     </div>
    ,document.body);
  }
function Component() {
  const [modalOpen, setModalOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <PortalModal
  message = 'Hello DelftStack Readers!'
       isModalOpen={modalOpen}
       onClose={
    () => setModalOpen(false)}
      />
    </div>
  )
}

Wir haben das Portal für das Modal im obigen Beispiel erstellt. Das Modal öffnet sich und erscheint außerhalb des root-Elements, sobald der Benutzer auf die Schaltfläche klickt.

Die Dimensionen dieses Modals würden von den übergeordneten Komponenten nicht geerbt oder geändert, da es außerhalb der Stammhierarchie gerendert wird.

Ausgang:

Demo ausführen