Bonjour,

Petite question pour ceux qui dev en react.

J'ai un Component C, qui a 3 enfants : C1, C2, C3.

Ces 3 enfants utilisent une même fonction doSomething() avec les mêmes paramètres fournis en props, du coup je désire la deplacer dans le component parent afin de la faire passer en tant que props, et ainsi éviter de dupliquer le code.

Le souci est que dans cette fonction commune, les child components créent des states de manière dynamique en utilisant des variables, exemple pour un bouton :
this.setState({[`${var}-button`] : value}

Ceci en bouclant sur une liste de valeurs dans le cadre de la création d'un tableau, et chaque ligne de ce tableau a un bouton (entre autres) que je dois pouvoir repérer de manière individuelle.
Cela marche bien lorsque chacunes de ces fonctions est dans son component attitré.

Grace a une enum, je n'ai pas de mal a refacto la méthode pour la placer dans le component parent et savoir ainsi quel enfant est concerné lors de la création du "state" : par exemple l'enfant appel this.props.doSomething(childConcerned, var);
Ce qui peut donc donner comme création : this.setState({[`${childConcerned}-${var}-button`] : value} . Ainsi je saurai peux toujours les differencier.

Le souci est : comment je fais pour faire passer ces "states" crées de manières dynamique au component child correspondant ? Puisqu'a la base, je ne sais pas combien ont été créés ni même leurs noms, cela dépend des valeurs qui seront traitées.

J'ai pensé a 2 options :
- faire passer tout l'objet "this.state" du parent vers l'enfant, mais du coup les enfants auraient accès à des props qui ne les concerne pas, cela agrandi le risque d'erreur a l'avenir

- laisser la méthode dupliquée dans les 3 component, pas fan mais peut-être plus sûr.

Je n'ai pas d'autre solution en tête pour le moment. Je suis pas très doué en JS (encore moins en react) donc il y a peut-être des options que je ne connais pas.

Désolé si c'est pas très clair, j'écris ça sur mobile donc j'ai fais au mieux (la sécurité de mon pc au taf m'empêche de venir sur jvc..)

Merci pour vos conseils et suggestions, si c'est pas assez clair j'essayerai d'éclaircir

J'avoue que là toute de suite j'ai un peu de mal à comprendre ce que tu souhaites faire. Tout ce que je sais c'est que si tu as à a faire des setStates en dehors de ton composant c'est que ton archi est mal faite, React est pas pensé pour ça, le principe d'un composant c'est qu'il est parfaitement indépendant.

Donc en dehors même de toute réponse, je pense que tu devrais détailler ton architecture, parce que de ce que j'ai pu comprendre de ton message, c'est d'abord elle qui pose problème.

Alors plutôt que faire des set state, c'était plutot utiliser ces states pour entrer des "className", et me servir de ces valeurs dans des conditions.
Mais au final tu as vu juste, j'ai tourné un peu la chose différemment et je n'ai plus besoin de les passer aux child component, je gère tout depuis le parent à présent. Les child ne font que trigger des fonctions du parent avec leurs paramètres lorsqu'il y a besoin.

Je suis junior donc c'est dur parfois de se rendre compte que le souci vient de l'architecture, surtout que sur mon projet actuel les demandes sont assez étranges (elles evoluent du jour au lendemain avec des ajouts, retraits ou modification de besoin du coup faut s'adapter en cours de route a plusieurs reprises..)

Merci pour ton retour

Le 03 décembre 2019 à 17:42:08 Kilmor69 a écrit :
Alors plutôt que faire des set state, c'était plutot utiliser ces states pour entrer des "className", et me servir de ces valeurs dans des conditions.
Mais au final tu as vu juste, j'ai tourné un peu la chose différemment et je n'ai plus besoin de les passer aux child component, je gère tout depuis le parent à présent. Les child ne font que trigger des fonctions du parent avec leurs paramètres lorsqu'il y a besoin.

Je suis junior donc c'est dur parfois de se rendre compte que le souci vient de l'architecture, surtout que sur mon projet actuel les demandes sont assez étranges (elles evoluent du jour au lendemain avec des ajouts, retraits ou modification de besoin du coup faut s'adapter en cours de route a plusieurs reprises..)

Merci pour ton retour

C'est le genre de projet assez insupportable effectivement, mais ouai sinon en React tu dois jamais avoir plus que des "paramètres" dans tes composants (les props du coup) s'il y a plus c'est que tu peux décomposer ton composant/le replacer.

En soit en React tu suis quasiment toujours le même principe :

Des layouts: c'est la page en soit, la base base, elle ne se contente que d'organiser les views
Des Views: c'est appelé par ton layout, la strat juste en dessous, c'est le contenu d'une page, celle qui va organiser tes components
Des components: Dernière strat, c'est des objets parfaitement indépendant qui pourraient être appelé littéralement n'importe quand et dans n'importe quel contexte ça doit marcher.

Par exemple, il y aurait un layout admin, qui appelerait une sidebar, une topbar, une view.
Ta view serait appelé dashboard et contiendrait 4 components, deux graphes et deux tableaux statistique.

à partir du moment où tu respecte ça en React tu auras jamais de soucis d'archi.

Merci beaucoup je vais essayer d'appliquer ça à mon développement