Comment un composant enfant peut-il mettre à jour l'état d'un parent dans React sans bibliothèques externes ?

Gestion de l'état parent-enfant dans React

Dans une application React, vous pouvez rencontrer des scénarios dans lesquels un composant enfant doit mettre à jour l'état du parent. Bien que les accessoires soient immuables par défaut, il existe des moyens d'obtenir cette fonctionnalité sans utiliser de bibliothèques externes comme Redux.

Approche de la solution

Pour la communication enfant-parent, vous pouvez utiliser une fonction de rappel transmise en tant qu'accessoires. du parent à l'enfant. Voici un exemple :

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 ce scénario :

• Le parent transmet la fonction de gestionnaire en tant qu'accessoire à l'enfant.
• Lorsque l'on clique sur le bouton dans Enfant , il appelle la fonction de gestionnaire.
• La fonction de gestionnaire dans Parent met à jour l'état someVar dans Parent.

Solution alternative

Si vous avez affaire à des composants non liés (par exemple, le composant 5 et le composant 3 dans votre exemple), vous pouvez restructurer vos composants :

• Créez un nouveau composant de niveau supérieur contenant l'état des deux composants (Composant 1 et Composant 3).
• Transmettre l'état du composant de niveau supérieur aux composants de niveau inférieur en tant qu'accessoires.

Cette approche vous permet de gérer efficacement l'état entre des composants non liés sans compter sur mécanismes de partage d'état intermédiaire.

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!