Vous avez probablement passé des accessoires d'un composant parent à un composant enfant, et vous vous êtes posé la question : "Hmm... mais que se passe-t-il si je veux passer des accessoires d'un composant enfant à un composant parent ? Je veux dire... l'inverse ?", droite? ? Là aussi, je me suis posé la question, mais il existe effectivement des solutions.

Nous les passerons en revue.

Quel est le flux typique d’accessoires ?

Le flux typique d'accessoires se fait du parent à l'enfant. En gros, disons que vous avez un composant Parent qui ressemble à ceci :

Le composant enfant que nous avons ci-dessous utilise un composant Button de la très appréciée bibliothèque de composants shadcn/ui. Le composant Button a un accessoire children, qui est transmis depuis le composant Parent.

Ci-dessus, nous transmettons un accessoire enfants du composant Parent au composant Enfant. Tout va bien jusqu’à présent, n’est-ce pas ?

Et si nous voulions transmettre les accessoires de l’enfant au parent ?

Maintenant, c'est là que les choses deviennent un peu délicates, surtout si c'est la première fois que vous implémentez une telle logique. La partie délicate n’est probablement pas comment s’y prendre, mais plutôt comment le visualiser. Quoi qu'il en soit, j'y suis allé et j'espère que mon expérience vous aidera ?

Parce qu'il est préférable d'apprendre par la pratique, reprenons l'exemple précédent et modifions-le un peu pour voir comment nous pouvons transmettre les accessoires de l'enfant au parent. Le but de cet exemple est de montrer comment nous pouvons modifier l'état du composant Parent en transmettant les données du composant Child.

Et voici ce que nous faisons à partir du composant Enfant :

Pour simplifier la compréhension sous forme écrite, ce que nous essayons d'accomplir avec les deux composants est d'initialiser l'état dans le composant Parent, puis de transmettre les variables au composant Enfant et à la fonction respective à mettre à jour. la valeur de l'état dans le composant Parent. Dans ce cas, supposons que la valeur de l’état soit d’abord définie sur false. Lorsque nous cliquons sur le bouton du composant Enfant, il prendra cette valeur et la changera à l'opposé de false (! dans la valeur l'annule) lorsque la fonction sera appelée lors de l'événement de clic.

Un piège courant lors de la transmission de données de l'enfant au parent

La transmission de données du composant enfant au parent a ses bizarreries. L'un des pièges les plus courants est d'oublier de transmettre la fonction de rappel en tant qu'accessoire au composant enfant, mais cela signifie également que vous transmettez plus de logique que vous devez transmettre. Cela peut conduire à des bugs plus ennuyeux et plus difficiles à déboguer.

Une façon d'éviter cela consiste à utiliser le hook useCallback, qui garantit que la fonction que vous transmettez en tant que rappel au composant enfant reste stable entre les rendus, évitant ainsi les nouveaux rendus inutiles et améliorant les performances. Ce qui se passe avec useCallback, c'est que vous transmettez une fonction en tant qu'accessoire au composant enfant, et le composant enfant aura accès à la fonction et pourra l'appeler en cas de besoin. Voyons comment nous pouvons procéder.

Montrons maintenant à quoi cela ressemble dans le composant Enfant :

N'est-ce pas plus propre que de transmettre la fonction, puis de la mettre à jour depuis l'enfant, puis de la transmettre à nouveau au parent ? Plus propre et plus facile à mettre en œuvre, non ? ?

Merci d'avoir lu!

Même s'il existe sûrement des moyens plus nombreux, et potentiellement encore plus propres et plus esthétiques, de transmettre des données d'un enfant à un parent dans React, j'espère qu'après avoir lu mon article, il vous sera plus facile de comprendre le flux de transmission des données. de l'enfant au parent, et comment procéder pour mettre cela en œuvre de deux manières différentes. Qui sait, peut-être trouverez-vous une manière plus créative de le faire vous-même ? ? Si tel est le cas, ce serait grandement apprécié d’expliquer vos idées dans les commentaires !

À propos de l'auteur

Je suis un développeur de logiciels et un rédacteur technique basé au Portugal. Je suis passionné par le génie logiciel ?‍? et j'aime explorer de nouveaux outils au quotidien et trouver des solutions intéressantes et créatives aux problèmes commerciaux et techniques courants. Vous pouvez me trouver sur GitHub. Si vous avez des questions ou des commentaires, n'hésitez pas à nous contacter ! ?