Component-Komposition

Teil des React-Kurses

Du hast eine Karte mit Rahmen und Schatten gebaut, und sie sieht gut aus. Jetzt brauchst du dieselbe Karte um ein Foto herum, um ein Anmeldeformular und um eine Liste von Kommentaren. Verlockend ist jetzt, die Karte dreimal zu kopieren oder ihr für jede denkbare Füllung ein eigenes Prop zu geben: title, photoUrl, formFields, comments. Beide Wege enden bei einer Komponente, die niemand mehr anfassen will.

Der Ausweg heißt Komposition: Großes bauen, indem man Kleines ineinander verschachtelt, sodass jedes Teil von den anderen nichts weiß. Ein Bilderrahmen ist ein gutes Bild dafür. Der Rahmen hat eine Aufgabe, nämlich einen Rand um das zu legen, was darin steckt, und er erledigt sie, ohne zu wissen oder wissen zu wollen, ob er ein Foto, eine Urkunde oder eine Kinderzeichnung hält.