Übergabe von props an Kinder in React

1. Übergabe von Props an Kinder in React
2. Übergeben von props an Kinder in React mit der Context-API
3. Übergeben von props an Kinder in React mit React.cloneElement()

React-Entwickler verlassen sich auf die Wiederverwendbarkeit von Komponenten, um leistungsstarke und dennoch wartbare Anwendungen zu erstellen.

Die Reaktionsbibliothek verfügt über ein Kompositionsmodell, das die Flexibilität bei der Verwendung wiederverwendbarer Komponenten erhöht. In manchen Situationen können Sie die untergeordneten Elemente Ihrer Komponenten nicht vorhersagen.

Wenn Sie beispielsweise eine Messaging-App erstellen, kann Ihr Dialogfeld Emojis sowie einen Text enthalten.

React bietet eine props.children-Funktion, um die Wiederverwendbarkeit der Komponenten zu erhöhen. Einfach ausgedrückt, können React-Entwickler this.props.children verwenden, um die Werte (normalerweise UI-Elemente) anzuzeigen, die zwischen den öffnenden und schließenden Tags einer übergeordneten Komponente platziert werden.

Übergabe von Props an Kinder in React

Stellen wir uns vor, Sie haben Kinderelemente, die Sie über props.children erhalten. Um sie anzuzeigen, müssen Sie props.children oder this.props.children (für Klassenkomponenten) in Ihre return-Anweisung aufnehmen.

Hier ein Beispiel mit drei Komponenten: der übergeordneten Komponente App ganz oben und einer Box-Komponente mit einer untergeordneten Text-Komponente. Lass uns mal sehen:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

Was aber, wenn Sie zusätzliche props an die in props.children enthaltenen Elemente oder Komponenten weitergeben müssen? In unserem Beispiel müssen wir möglicherweise eine color- oder fontSize-Eigenschaft für unseren Text angeben.

Lassen Sie uns zwei großartige Möglichkeiten erkunden, dies zu tun.

Übergeben von props an Kinder in React mit der Context-API

Context ermöglicht es Ihnen, props an einen ganzen Baum von Komponenten zu übergeben. Dies ist äußerst nützlich, da Sie oben eine App-Komponente haben, aber einen Ereignishandler an eine untergeordnete Komponente am unteren Rand des Baums weitergeben möchten.

Sie können es manuell weitergeben, aber es ist zeitaufwändig und schwer zu verfolgen. Stattdessen können Sie mit Context den Wert in jeder untergeordneten Komponente verfügbar machen.

Technisch gesehen ist Context nicht dasselbe wie props, aber es erledigt die Arbeit in unserer Situation. Dazu verwenden wir die Methode React.createContext(), die in allen React-Anwendungen verfügbar ist.

Zuerst definieren wir eine Variable, um eine Context-Instanz zu speichern:

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

Beachten Sie, dass die Variable außerhalb des Geltungsbereichs von Klassenkomponenten erstellt wird.

Wir finden die Komponente, die this.props.children anzeigt, und wickeln sie mit <SampleContext.Provider> ein. Alles, was sich zwischen den öffnenden und schließenden Tags des Wrappers befindet, hat Zugriff auf die von uns definierten Werte.

Dann geben wir den Wert an:

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

Jetzt gehen wir zu der Komponente, die wie this.props.children weitergegeben wird, und setzen die Eigenschaft contextType gleich der Variablen, die wir ursprünglich erstellt haben:

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

Sobald wir das getan haben, können wir auf die Werte von Context zugreifen. In diesem Fall definieren wir ein Inline-Style-Objekt und setzen die Eigenschaft color auf this.context.color, rot.

Der Text ist tatsächlich rot, wie im playcode zu sehen ist. Sie können versuchen, den Code selbst zu bearbeiten, indem Sie Eigenschaften im Context hinzufügen oder entfernen und sehen, ob er funktioniert.

Übergeben von props an Kinder in React mit React.cloneElement()

Alternativ können Sie auch die Methode cloneElement() verwenden, um den Elementen oder Komponenten in Ihren props.children benutzerdefinierte props hinzuzufügen. Schauen wir uns ein Beispiel an und verdauen es:

<>{React.cloneElement(props.children, {color: "red"})}</>

In unserem Beispiel benötigt die Methode zwei Argumente. Zuerst müssen wir es props.children übergeben, das es als Ausgangspunkt für das Klonen verwendet. Das bedeutet, dass das geklonte Element alle props des Originals hat.

Die Methode cloneElement() behält auch Refs bei, die bei der Interaktion mit DOM wichtig sind.

Als zweites Argument müssen wir alle zusätzlichen props übergeben, die die Komponente erhalten soll. In diesem Fall übergeben wir eine color-Requisite mit dem Wert "red".