Comment puis-je mettre à jour l'état d'un composant parent à partir d'un composant enfant dans React ?

Gestion de l'état enfant-parent dans React

Dans React, maintenir l'état au sein de la hiérarchie d'un composant peut être difficile, en particulier lorsque l'état d'un Le composant parent doit être mis à jour à partir d'un enfant. L'exemple fourni montre une structure de composant parent-enfant dans laquelle le composant 3 doit afficher des données en fonction de l'état du composant 5.

Bien que les accessoires soient généralement immuables, cela ne signifie pas qu'il est impossible de mettre à jour l'état d'un parent à partir d'un enfant. Voici comment y parvenir :

Transmettez une fonction de définition d'état comme accessoire du parent à l'enfant. Cela permet à l'enfant de mettre à jour l'état du parent lorsqu'il est appelé.

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} / >
  }
}

Dans cet exemple, l'enfant a accès à la fonction de gestionnaire du parent. Lorsque l'on clique sur le bouton dans l'enfant, le gestionnaire est appelé, mettant à jour l'état du parent.

Cependant, il est important de considérer la structure des composants. Dans votre cas, les composants 5 et 3 ne sont pas directement liés. Pour résoudre ce problème, vous pouvez introduire un composant de niveau supérieur qui encapsule l'état des composants 1 et 3. Ce composant intermédiaire fournirait alors les accessoires nécessaires aux composants de niveau inférieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!