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

Comment propager les mises à jour d'état de l'enfant au parent dans React sans Redux

Le modèle de flux de données unidirectionnel de React présente souvent des défis dans la mise à jour des composants parents État de leurs descendants. Considérons un scénario dans lequel la structure de composants suivante existe :

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

L'objectif est que le composant 3 affiche des données en fonction de l'état du composant 5. Étant donné que les accessoires sont immuables, passer l'état du composant 5 au composant 1 n'est pas réalisable.

Au lieu de cela, React fournit une solution via la communication enfant-parent à l'aide de fonctions de rappel. L'extrait de code suivant montre comment cela peut être réalisé :

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, le parent transmet une fonction de rappel, handler(), au composant enfant via des accessoires. Cette fonction, lorsqu'elle est invoquée par l'enfant, déclenche une mise à jour de l'état dans le composant parent, permettant au changement d'état de se propager dans l'arborescence des composants.

Bien que cette approche réponde au défi immédiat, elle peut nécessiter de repenser la structure du composant. . Dans le scénario donné, les composants 5 et 3 ne semblent pas avoir de relation directe. Pour atténuer ce problème, envisagez de les envelopper dans un composant de niveau supérieur qui gère l'état des deux composants et le propage via les accessoires. Cela permet une solution plus modulaire et maintenable.

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!