Création de fonctions d'assistance réutilisables dans React.js

Question

J'ai créé des composants React pour ma dernière application. Je sais que je peux réutiliser des composants qui ont aidé à garder mon code SEC. Je voulais savoir si je pouvais réutiliser des fonctions. Je sais qu'il doit y avoir un moyen.

Actuellement, j'ai trois composants qui utilisent une fonction de validation de mot de passe.

passwordValidation() { 
    const length = this.state.password.length; 
    if (length > 7) return 'success'; 
    else if (length > 4) return 'warning'; 
    else if (length > 0) return 'error'; 
} 

J'ai créé un fichier d'aide - helpers.jsx et a ajouté:

export function passwordValidation() { 
    const length = this.state.password.length; 
    if (length > 7) return 'success'; 
    else if (length > 4) return 'warning'; 
    else if (length > 0) return 'error'; 
} 

Je l'ai alors importé dans mon composant

import { passwordValidation } from '../helpers.jsx' 

Je continue à obtenir l'erreur « passwordValidation est pas function "quand j'essaye de lier" this "dans mon constructeur.

Si je l'appelle dans la balise d'entrée, j'obtiens "impossible de lire l'état de la propriété de non défini." Je cherche juste à voir où je me trompe. Tout fonctionne si je le définis dans ma classe et ajouter this.passwordValidation = this.passwordValidation.bind(this). Je reviendrai à ce que je faisais si ce n'était pas la meilleure pratique, mais je pars du principe que je devrais pouvoir importer des fonctions pour faciliter la vie et mon code plus propre!

Answer 1

fonctions d'assistance ne doivent pas dépendre du contexte de la composante qu'ils sont appelés à (au moins à mon avis). Si vous avez besoin d'utiliser un paramètre dans votre fonction en passant cela à la fonction est toujours une meilleure pratique car elle aide à la réutilisation. La clé pour la propriété d'état peut être différente pour tous les composants et cela peut entraîner des erreurs si vous oubliez d'utiliser la clé exacte pour la propriété d'état.

Par exemple

export function passwordValidation(password) { 
    const length = password.length; 
    if (length > 7) return 'success'; 
    else if (length > 4) return 'warning'; 
    else if (length > 0) return 'error'; 
} 

Si je change la fonction ci-dessus comme je peux utiliser tous les exemples donnés ci-dessous.

import { passwordValidation } from '/path/to/helper/functions.js'; 

console.log(passwordValidation(this.state.password)); 
console.log(passwordValidation(this.state.confirmPassword)); 
console.log(passwordValidation(this.props.password)); 
console.log(passwordValidation(someFetchedObject.user.password)); 

Answer 2

import { passwordValidation } from '../helpers.jsx' 

dit essentiellement:

var { passwordValidation } = (function passwordValidation() {...}); 

passwordValidation est une fonction, et les fonctions sont des objets de JS, il cherche essentiellement:

var passwordValidation = (function...(){...}).passwordValidation; 

Au lieu de cela, juste affecter la fonction directement à passwordValidation:

import passwordValidation from '../helpers.jsx' 

ou appelez le require directement si vous êtes dans un contexte où require est disponible.

const passwordValidation = require('...resource...') 

Answer 3

Votre importation et votre exportation vont bien. Votre utilisation des exportations/importés nommés à partir de ES6.

Le problème est d'essayer d'utiliser l'état, je crois. Est-il possible de fusionner les trois composants en utilisant la validation du mot de passe en un seul? Ou supprimer la référence d'état dans la fonction d'assistance et simplement passer le mot de passe comme argument? Cela devrait fonctionner très bien.