Wie kann eine untergeordnete Komponente den Status einer übergeordneten Komponente in React ohne externe Bibliotheken aktualisieren?

Parent-Child-Statusverwaltung in React

In einer React-Anwendung kann es vorkommen, dass eine untergeordnete Komponente den Status des übergeordneten Elements aktualisieren muss. Während Requisiten standardmäßig unveränderlich sind, gibt es Möglichkeiten, diese Funktionalität zu erreichen, ohne externe Bibliotheken wie Redux zu verwenden.

Lösungsansatz

Für die Kind-Eltern-Kommunikation können Sie eine als Requisiten übergebene Rückruffunktion verwenden vom Elternteil zum Kind. Hier ist ein Beispiel:

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.setState({ someVar: 'some value' });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

In diesem Szenario:

• Parent übergibt die Handlerfunktion als Requisite an Child.
• Wenn auf die Schaltfläche in Child geklickt wird , ruft es die Handler-Funktion auf.
• Die Handler-Funktion in Parent aktualisiert den SomeVar-Status darin Übergeordnet.

Alternative Lösung

Wenn Sie es mit nicht verwandten Komponenten zu tun haben (z. B. Komponente 5 und Komponente 3 in Ihrem Beispiel), können Sie Ihre Komponenten neu strukturieren:

• Erstellen Sie eine neue übergeordnete Komponente, die den Status für beide Komponenten (Komponente 1 und Komponente) enthält 3).
• Übergeben Sie den Zustand von der übergeordneten Komponente an die untergeordneten Komponenten als Requisiten.

Mit diesem Ansatz können Sie den Zustand zwischen unabhängigen Komponenten effektiv verwalten, ohne sich darauf verlassen zu müssen Zwischenstaatliche Sharing-Mechanismen.

Das obige ist der detaillierte Inhalt vonWie kann eine untergeordnete Komponente den Status einer übergeordneten Komponente in React ohne externe Bibliotheken aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!