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

Übergabe übergeordneter Statusaktualisierungen über Callback-Funktionen in React

Bei der Arbeit mit verschachtelten React-Komponenten kann es notwendig werden, den Status einer zu aktualisieren übergeordnete Komponente innerhalb einer untergeordneten Komponente. Da Requisiten unveränderlich sind, ist es nicht möglich, ihnen direkt Werte zuzuweisen.

In solchen Szenarien besteht ein alternativer Ansatz darin, eine Funktion an die untergeordnete Komponente zu übergeben, die es ihr ermöglicht, den Status der übergeordneten Komponente zu aktualisieren. Dies kann wie folgt erreicht werden:

// Parent Component
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} />;
  }
}

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

Durch diesen Mechanismus kann die untergeordnete Komponente die durch Requisiten bereitgestellte Funktion aufrufen und den Status des übergeordneten Elements aktualisieren.

Es ist jedoch wichtig zu beachten, dass Ihre Die Komponentenstruktur muss möglicherweise neu bewertet werden. Die Komponenten 5 und 3 in Ihrem Beispiel scheinen keine direkte Beziehung zu haben.

Eine mögliche Lösung besteht darin, eine übergeordnete Komponente einzuführen, die beide Komponenten 5 und 3 kapselt. Diese übergeordnete Komponente kann den Status beibehalten, der für relevant ist beide untergeordneten Komponenten und geben sie über Requisiten weiter.

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