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

Child-Parent-Zustandsverwaltung in React

In React kann die Aufrechterhaltung des Zustands innerhalb der Hierarchie einer Komponente eine Herausforderung sein, insbesondere wenn der Zustand eines Die übergeordnete Komponente muss von einer untergeordneten Komponente aktualisiert werden. Das bereitgestellte Beispiel zeigt eine übergeordnete-untergeordnete Komponentenstruktur, bei der Komponente 3 Daten basierend auf dem Status von Komponente 5 anzeigen muss.

Während Requisiten normalerweise unveränderlich sind, bedeutet dies nicht, dass es unmöglich ist, den Status eines übergeordneten Elements von einem untergeordneten Element aus zu aktualisieren. So können Sie es erreichen:

Übergeben Sie eine Zustandseinstellungsfunktion als Requisiten vom Elternteil an das Kind. Dadurch kann das Kind den Status des Elternteils aktualisieren, wenn es aufgerufen wird.

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 hat das Kind Zugriff auf die Handlerfunktion des Elternteils. Wenn auf die Schaltfläche innerhalb des untergeordneten Elements geklickt wird, wird der Handler aufgerufen, der den Status des übergeordneten Elements aktualisiert.

Es ist jedoch wichtig, die Komponentenstruktur zu berücksichtigen. In Ihrem Fall stehen die Komponenten 5 und 3 nicht in direktem Zusammenhang. Um dieses Problem zu lösen, könnten Sie eine übergeordnete Komponente einführen, die den Zustand für die Komponenten 1 und 3 kapselt. Diese Zwischenkomponente würde dann den Komponenten auf niedrigerer Ebene die notwendigen Requisiten bereitstellen.

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