Partager l'état entre les composants

Parfois, vous souhaitez que l'état de deux composants change toujours ensemble. Pour ce faire, retirez l'état des deux, déplacez-le vers leur parent commun le plus proche, puis transmettez-le-leur via les props. C'est ce qu'on appelleremonter l'état,et c'est l'une des choses les plus courantes que vous ferez en écrivant du code React.

Remonter l'état par l'exemple

Dans cet exemple, un composant parentAccordionaffiche deuxPanels distincts :

• Accordion
  • Panel
  • Panel

Chaque composantPanelpossède un état booléenisActivequi détermine si son contenu est visible.

Appuyez sur le bouton Afficher pour les deux panneaux :

Notez que l'appui sur le bouton d'un panneau n'affecte pas l'autre panneau — ils sont indépendants.

Initialement, l'étatisActivede chaquePanelestfalse, donc ils apparaissent tous deux repliés

Cliquer sur le bouton de l'un ou l'autrePanelne mettra à jour que l'étatisActivede cePaneluniquement

Mais supposons maintenant que vous souhaitiez modifier cela pour qu'un seul panneau soit déplié à un moment donné.Avec cette conception, déplier le deuxième panneau devrait replier le premier. Comment feriez-vous cela ?

Pour coordonner ces deux panneaux, vous devez « remonter leur état » vers un composant parent en trois étapes :

1. Retirerl'état des composants enfants.
2. Transmettredes données codées en dur depuis le parent commun.
3. Ajouterl'état au parent commun et le transmettre vers le bas avec les gestionnaires d'événements.

Cela permettra au composantAccordionde coordonner les deuxPanels et de n'en déplier qu'un à la fois.

Étape 1 : Retirer l'état des composants enfants

Vous allez donner le contrôle de l'étatisActiveduPanelà son composant parent. Cela signifie que le composant parent transmettraisActiveauPanelcomme une prop. Commencez parsupprimer cette lignedu composantPanel :

Et à la place, ajoutezisActiveà la liste des props duPanel :

Maintenant, le composant parent duPanel peut contrôlerisActiveenle transmettant comme prop.Inversement, le composantPaneln’a maintenantaucun contrôlesur la valeur deisActive—c’est maintenant au composant parent de décider !

Étape 2 : Transmettre des données codées en dur depuis le parent commun

Pour remonter l’état, vous devez localiser le composant parent commun le plus prochedes deuxcomposants enfants que vous souhaitez coordonner :

• Accordion(parent commun le plus proche)
  • Panel
  • Panel

Dans cet exemple, c’est le composantAccordion. Puisqu’il est au-dessus des deux panneaux et peut contrôler leurs props, il deviendra la « source de vérité » pour savoir quel panneau est actuellement actif. Faites en sorte que le composantAccordiontransmette une valeur codée en dur pourisActive(par exemple,true) aux deux panneaux :

Essayez de modifier les valeurs codées en dur deisActivedans le composantAccordionet observez le résultat à l’écran.

Étape 3 : Ajouter un état au parent commun

Remonter l’état change souvent la nature de ce que vous stockez comme état.

Dans ce cas, un seul panneau devrait être actif à la fois. Cela signifie que le composant parent communAccordiondoit garder une trace dequelpanneau est actif. Au lieu d’une valeurboolean, il pourrait utiliser un nombre comme index duPanelactif pour la variable d’état :

LorsqueactiveIndexvaut0, le premier panneau est actif, et lorsqu’il vaut1, c’est le second.

Cliquer sur le bouton « Show » dans l’un ou l’autrePaneldoit modifier l’index actif dansAccordion. UnPanelne peut pas définir directement l’étatactiveIndexcar il est défini à l’intérieur deAccordion. Le composantAccordion doit permettre explicitementau composantPanelde modifier son état entransmettant un gestionnaire d’événements comme prop:

Le<button>à l’intérieur duPanelutilisera maintenant la proponShowcomme gestionnaire de clic :

Cela termine la remontée de l'état ! Déplacer l'état dans le composant parent commun vous a permis de coordonner les deux panneaux. Utiliser l'index actif au lieu de deux indicateurs « est affiché » a garanti qu'un seul panneau soit actif à un moment donné. Et passer le gestionnaire d'événement aux enfants a permis à l'enfant de modifier l'état du parent.

Initialement,Accordiona unactiveIndexde0, donc le premierPanelreçoitisActive = true

Lorsque l'étatactiveIndexdeAccordionpasse à1, le secondPanelreçoitisActive = trueà la place

Une source unique de vérité pour chaque état

Dans une application React, de nombreux composants auront leur propre état. Certains états peuvent « vivre » près des composants feuilles (composants en bas de l'arbre) comme les champs de saisie. D'autres états peuvent « vivre » plus près du sommet de l'application. Par exemple, même les bibliothèques de routage côté client sont généralement implémentées en stockant la route actuelle dans l'état React, et en la transmettant par des props !

Pour chaque élément d'état unique, vous choisirez le composant qui en est le « propriétaire ».Ce principe est également connu sous le nom de« source unique de vérité ».Cela ne signifie pas que tout l'état réside en un seul endroit — mais que pourchaqueélément d'état, il existe un composantspécifiquequi détient cette information. Au lieu de dupliquer l'état partagé entre les composants,remontez-levers leur parent commun partagé, ettransmettez-leaux enfants qui en ont besoin.

Votre application évoluera au fur et à mesure que vous travaillerez dessus. Il est courant de déplacer l'état vers le bas ou de le remonter pendant que vous déterminez encore où chaque élément de l'état « vit ». Cela fait partie du processus !

Pour voir ce que cela donne en pratique avec quelques composants supplémentaires, lisezPenser en React.

Récapitulatif

• Lorsque vous souhaitez coordonner deux composants, déplacez leur état vers leur parent commun.
• Puis transmettez les informations vers le bas via les props depuis leur parent commun.
• Enfin, transmettez les gestionnaires d'événements vers le bas afin que les enfants puissent modifier l'état du parent.
• Il est utile de considérer les composants comme "contrôlés" (pilotés par les props) ou "non contrôlés" (pilotés par l'état).