Übergabe von props an Kindelemente in React

React-Komponenten können den Inhalt, der zwischen ihren Tags verschachtelt ist, mit props.children darstellen. Dadurch werden den darin enthaltenen Elementen nicht automatisch props hinzugefügt. Um einen Wert mit Nachfahren zu teilen, verwenden Sie Context; um einem bestimmten, bekannten Kindelement eine Prop hinzuzufügen, verwenden Sie React.cloneElement().

Ein Nachrichtendialog kann beispielsweise Text, ein Emoji oder eine Kombination aus Elementen erhalten. Seine wiederverwendbare Komponente muss diesen Inhalt nicht im Voraus kennen: Sie kann props.children an der Stelle darstellen, an der der Dialogkörper erscheinen soll.

Props in React an Kindelemente übergeben

Ein Wrapper kann verschachtelte Inhalte anzeigen, indem er {children} innerhalb seines Markups zurückgibt. Beispielsweise stellt function Box({ children }) { return <div>{children}</div>; } alles dar, was ein übergeordnetes Element zwischen <Box> und </Box> platziert. Ein übergeordnetes Element kann den Wrapper etwa so mit einem Kindelement zusammensetzen: function App() { return <Box><Text /></Box>; }.

Bei dieser Zusammensetzung wird das Text-Element als Prop children an Box übergeben; dem Element Text wird dadurch keine Prop color gesetzt. Benötigt das Kindelement einen Wert, übergeben Sie ihn beim Erstellen des Elements ausdrücklich, etwa mit <Text color="red" />. Alternativ können Sie einen der folgenden Ansätze wählen, wenn der Wrapper diesen Wert bereitstellen soll.

Diese JSX-Fragmente veranschaulichen, wie die Komponenten verbunden werden. Sie setzen voraus, dass React in der Anwendung verfügbar ist; es handelt sich weder um eigenständige Dateien noch um eine berichtete Laufzeitausgabe. Das Kindelement kann den Wert beispielsweise mit einer Funktionssignatur wie function Text({ color }) { return <p style={{ color }}>Welcome to App</p>; } auslesen.

Props in React mit der Context-API an Kindelemente übergeben

Verwenden Sie Context, wenn mehrere Komponenten innerhalb eines Teilbaums denselben Wert benötigen und seine Weitergabe durch jede dazwischenliegende Komponente unnötigen Verbindungsaufwand verursachen würde. Context stellt einen Wert den Verbrauchern unterhalb seines Providers zur Verfügung. Es ist von props getrennt und reicht nicht buchstäblich eine Prop durch jede Komponente weiter.

Erstellen Sie einen Context, zum Beispiel mit const ColorContext = React.createContext("black");, und platzieren Sie einen Provider um den Inhalt, der den Wert benötigt: <ColorContext.Provider value="red">{children}</ColorContext.Provider>. Ein Nachfahre kann den Wert mit const color = React.useContext(ColorContext); auslesen und beispielsweise mit <p style={{ color }}>Welcome to App</p> anwenden. Der Wert des Providers steht Komponenten zur Verfügung, die innerhalb dieses Providers gerendert werden. Platzieren Sie den Provider daher um den Teilbaum, der den Wert benötigt. Der Standardwert wird nur verwendet, wenn sich oberhalb eines Verbrauchers kein passender Provider befindet. Gibt es einen passenden Provider, erhält der Verbraucher den von ihm bereitgestellten Wert – auch dann, wenn dieser undefined ist – statt des Standardwerts.

Dieser Ansatz eignet sich für Werte wie ein Design oder eine Spracheinstellung, die mehrere Nachfahren verwenden. Für ein einzelnes Kindelement, das einen zusätzlichen Wert benötigt, kann Klonen direkter sein.

Props in React mit React.cloneElement() an Kindelemente übergeben

React.cloneElement() erstellt aus einem gültigen React-Element und einer Menge von props ein neues Element. Ein Wrapper kann React.cloneElement(children, { color: "red" }) verwenden, um bei einem Kindelement color hinzuzufügen oder zu überschreiben und zugleich dessen übrige props beizubehalten. Das Kindelement kann color anschließend wie im obigen Text-Beispiel verwenden.

Dieser Ansatz setzt voraus, dass children genau ein gültiges React-Element ist. props.children kann stattdessen Text, mehrere Elemente oder eine andere Form enthalten. Prüfen oder behandeln Sie daher zunächst die Form, bevor Sie React.cloneElement() aufrufen. Beliebiger Text und mehrere Kindelemente lassen sich nicht so an diese Form für ein einzelnes Element übergeben, als wären sie ein einziges Element. Soll der Wrapper unterschiedliche Inhalte akzeptieren, stellen Sie sie unverändert dar oder verwenden Sie Context, wenn Nachfahren einen gemeinsamen Wert benötigen.

Verwenden Sie Context für einen Wert, der im gesamten Teilbaum gebraucht wird. Verwenden Sie React.cloneElement(), wenn der Wrapper gezielt ein bekanntes Kindelement ändern soll. Keine der beiden Methoden ändert die grundlegende Rolle von props.children: Es steht für den verschachtelten Inhalt, den das übergeordnete Element bereitstellt.