Partage de la logique dans react

Question

J'ai utilisé un composant d'ordre supérieur pour partager une fonction entre mes composants. Avec cette implémentation, la fonction vient en tant que prop dans mon composant.

L'application prend en charge plusieurs langues, de sorte que dans chaque composant, une clé est transmise et la valeur de hachage est obtenue pour l'affichage. Les valeurs de hachage sont transmises à tous les composants en utilisant le contexte. Maintenant, l'application est en cours de développement. getSkinHash accède au contexte et renvoie la valeur du hachage.

const {getSkinHash} = this.props; //shared function,accesses the context

const value = getSkinHash(SOME_VALUE);

Il n'y a pas de problème avec cette implémentation, mais obtenir la fonction à partir de prop à chaque fois entraîne l'écriture de beaucoup de code standard dans tous les composants.

Existe-t-il un meilleur moyen ou un moyen alternatif d'y parvenir ?

Remerciements

Answer 1

React fonctionne avec des propriétés, vous ne pouvez donc pas simplement dire que vous ne voulez pas travailler avec des propriétés. C'est le cas lorsqu'il s'agit de partager des données entre des composants.

Pour autant que vous puissiez faire pour raccourcir

const {getSkinHash} = this.props;
const value = getSkinHash(SOME_VALUE);

est de :

this.props.getSkinHash(SOME_VALUE) .

S'il s'agit d'une fonction générique, qui ne dépend pas d'un composant, vous pouvez choisir de l'importer dans votre composant comme vous importez d'autres éléments.

import { myFunction } from './functions'

Il suffit alors de l'appeler avec myFunction .

Si vous avez besoin que votre fonction synchronise les données entre vos composants, utilisez une fonction Redux et connecter vos composants à l'état global. Vos autres composants seront également informés des changements de hachage de valeur.