Wie aktualisiere ich den Status einer übergeordneten Komponente von einer tief verschachtelten untergeordneten Komponente in React?

So verbreiten Sie Zustandsaktualisierungen vom untergeordneten zum übergeordneten Element in React ohne Redux

Das unidirektionale Datenflussmodell von React stellt häufig Herausforderungen bei der Aktualisierung übergeordneter Komponenten dar. Staat von ihren Nachkommen. Betrachten wir ein Szenario, in dem die folgende Komponentenstruktur vorhanden ist:

Component 1
    - Component 2
        - Component 4
            - Component 5
Component 3

Das Ziel besteht darin, dass Komponente 3 Daten basierend auf dem Status von Komponente 5 anzeigt. Da Requisiten unveränderlich sind, ist die Übergabe des Status von Komponente 5 an Komponente 1 nicht möglich.

Stattdessen bietet React eine Lösung durch Kommunikation zwischen Kind und Eltern mithilfe von Rückruffunktionen. Der folgende Codeausschnitt zeigt, wie dies erreicht werden kann:

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 Beispiel übergibt das übergeordnete Element eine Rückruffunktion, handler(), über Requisiten an die untergeordnete Komponente. Wenn diese Funktion vom untergeordneten Element aufgerufen wird, löst sie eine Statusaktualisierung in der übergeordneten Komponente aus, sodass sich die Statusänderung im Komponentenbaum nach oben ausbreiten kann.

Während dieser Ansatz die unmittelbare Herausforderung angeht, erfordert er möglicherweise ein Überdenken der Komponentenstruktur . Im gegebenen Szenario scheinen die Komponenten 5 und 3 keinen direkten Zusammenhang zu haben. Um dieses Problem zu lösen, sollten Sie erwägen, sie in eine übergeordnete Komponente einzubinden, die den Status für beide Komponenten verwaltet und ihn über Requisiten weitergibt. Dies ermöglicht eine modularere und wartbarere Lösung.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich den Status einer übergeordneten Komponente von einer tief verschachtelten untergeordneten Komponente in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!