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

Transmission des mises à jour de l'état parent via les fonctions de rappel dans React

Lorsque vous travaillez avec des composants React imbriqués, il peut s'avérer nécessaire de mettre à jour l'état d'un composant parent à partir d’un composant enfant. Étant donné que les accessoires sont immuables, leur attribuer directement des valeurs n'est pas réalisable.

Dans de tels scénarios, une approche alternative consiste à transmettre une fonction au composant enfant qui lui permet de mettre à jour l'état du parent. Ceci peut être réalisé comme suit :

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

Grâce à ce mécanisme, le composant enfant peut invoquer la fonction fournie via les accessoires et mettre à jour l'état du parent.

Cependant, il est important de noter que votre la structure des composants devra peut-être être réévaluée. Les composants 5 et 3 dans votre exemple semblent n'avoir aucune relation directe.

Une solution potentielle consiste à introduire un composant de niveau supérieur qui encapsule les deux composants 5 et 3. Ce composant parent peut maintenir l'état pertinent pour les deux composants enfants et les transmettre via les accessoires.

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!