Komposition

Komposition

Verschiedene Komponenten miteinander kombinieren, indem wir das children-Prop oder ein anderes definiertes Prop nutzen.

Mit Komposition können wir:

1. Gut wiederverwendbare und flexible Komponente erstellen

2. Das Problem von Prop Drilling lösen

Beispiel

Unser Ziel ist es ein Modal zu haben, welches verschiedene Status anzeigen kann, z.B. Success oder Error:

const modal = ({ children }) {
  return (
    <div className="modal">
      {children}
    </div>
  )
} 

Nun können wir andere Komponenten als dieses Child einfügen, um das Modal wiederzuverwenden:

<Modal>
  <Success />  
</Modal>

<Modal>
  <Error />  
</Modal>