Das Erstellen von Modalitäten und Tooltips in React war oft komplex, schwierig zu gestalten und führte zu vielen Stilfehlern.
Die createPortal-API vereinfacht diesen Prozess und ermöglicht das Rendern von Komponenten außerhalb des Haupt-DOM, was zu einer einfacheren Gestaltung und Wartbarkeit führt. In diesem Beitrag erfahren Sie, wie Sie dieses Tool verwenden, um Modalitäten und Tooltips in React richtig zu erstellen.

Grundlegendes zur createPortal-API

createPortal ist eine integrierte React-Funktion, mit der Sie Komponenten in verschiedenen Teilen des DOM rendern können. Und es ist besonders nützlich zum Erstellen von: Modalen und Overlays, Komponenten von Drittanbietern und benutzerdefinierten UI-Elementen.

Wie es funktioniert

Ein Portal wird innerhalb der Return-Anweisung der Komponente verwendet und ändert nur die physische Platzierung des DOM-Knotens. Es ist, als würde man einen DOM-Knoten außerhalb des Haupt-DOM-Baums teleportieren. Die createPortal-API greift auf zwei Parameter und einen dritten optionalen zu:

• Kinder: alles, was mit React, einem Div, einer Komponente oder einem React-Fragment gerendert werden kann.
• domNode: Dies ist der Speicherort der untergeordneten Elemente, die platziert werden sollen.
• key (optional): eine eindeutige Zahl oder Zeichenfolge, die als Portalschlüssel verwendet wird.

Wenn wir davon ausgehen, dass wir ein Portal in Komponente A erstellen und es in Komponente B rendern, greifen die untergeordneten Elemente des Portals auf den gesamten Status und die Variablen von Komponente A zu und funktionieren so, wie es in Komponente A ist, während es in Komponente gerendert wurde B.

Portal erstellen und nutzen

Im folgenden Beispiel wird das Portal verwendet, um die untergeordnete Komponente zu teleportieren, die einen Zustand akzeptiert und diese Komponente in den Körper verschiebt.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

Jetzt wird die untergeordnete Komponente in HTML in Body-Tags gerendert.

Abschluss

createPortal ist ein wertvolles Tool in React zum Erstellen von Modalen, Tooltips und anderen Komponenten, die außerhalb des Haupt-DOM-Baums gerendert werden müssen. Durch die Verwendung dieses Tools können Sie einen saubereren, flexibleren und effizienteren Ansatz für diese Elemente erreichen.