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

Mise à jour de l'état d'un parent dans React sans Redux

De nombreux développeurs sont confrontés au défi de communiquer l'état entre les composants imbriqués. Un scénario courant se produit lorsqu'un composant enfant doit mettre à jour l'état d'un composant parent de niveau supérieur. Cela devient problématique puisque React dicte que les accessoires sont immuables.

Considérez la structure de composant suivante :

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

Dans ce scénario, le composant 3 nécessite l'accès à l'état stocké dans le composant 5. Cela peut sembler intuitif pour transmettre l'état du composant 5 en tant qu'accessoire au composant 1 et le transmettre aux autres composants. Cependant, les règles d'immuabilité de React interdisent cette approche.

Une solution à ce problème consiste à implémenter la communication enfant-parent à l'aide d'une fonction fournie par le composant parent. Considérez l'extrait de code suivant :

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, la fonction de gestionnaire fournie par le composant Parent est transmise au composant Child en tant qu'accessoire. Lorsque vous cliquez sur le bouton du composant Enfant, il invoque la fonction de gestionnaire, mettant à jour l'état du composant Parent.

Il est important de noter que cette solution nécessite de restructurer la hiérarchie des composants pour garantir des relations logiques entre les composants. Dans l'exemple donné, le composant 5 et le composant 3 peuvent ne pas être directement liés. Il peut donc être nécessaire de créer une nouvelle composante qui les englobe, permettant une gestion efficace de l'État.

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!