Wie kann ich den Status einer übergeordneten Komponente von einer verschachtelten untergeordneten Komponente in React aktualisieren, ohne Redux zu verwenden?

Aktualisieren des Status eines übergeordneten Elements in React ohne Redux

Viele Entwickler stehen vor der Herausforderung, den Status zwischen verschachtelten Komponenten zu kommunizieren. Ein häufiges Szenario entsteht, wenn eine untergeordnete Komponente den Status einer übergeordneten Komponente einer höheren Ebene aktualisieren muss. Dies wird problematisch, da React vorschreibt, dass Requisiten unveränderlich sind.

Betrachten Sie die folgende Komponentenstruktur:

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

In diesem Szenario erfordert Komponente 3 Zugriff auf den in Komponente 5 gespeicherten Zustand. Es scheint, als ob Es ist intuitiv, den Zustand von Komponente 5 als Requisite an Komponente 1 zu übergeben und an die anderen Komponenten weiterzuleiten. Allerdings verbieten die Unveränderlichkeitsregeln von React diesen Ansatz.

Eine Lösung für dieses Problem besteht darin, die Kind-Eltern-Kommunikation mithilfe einer von der Elternkomponente bereitgestellten Funktion zu implementieren. Betrachten Sie den folgenden Codeausschnitt:

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 wird die von der übergeordneten Komponente bereitgestellte Handlerfunktion als Requisite an die untergeordnete Komponente übergeben. Wenn auf die Schaltfläche in der untergeordneten Komponente geklickt wird, wird die Handlerfunktion aufgerufen und der Status der übergeordneten Komponente aktualisiert.

Es ist wichtig zu beachten, dass diese Lösung eine Umstrukturierung der Komponentenhierarchie erfordert, um logische Beziehungen zwischen Komponenten sicherzustellen. Im gegebenen Beispiel stehen Komponente 5 und Komponente 3 möglicherweise nicht in direktem Zusammenhang. Daher kann es notwendig sein, eine neue Komponente zu schaffen, die sie umfasst und eine effektive Verwaltung des Staates ermöglicht.

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