Comment créer un fichier d'aide rempli de fonctions dans React Native?


133

Bien qu'il y ait une question similaire, je ne parviens pas à créer un fichier avec plusieurs fonctions. Je ne sais pas si la méthode est déjà obsolète ou non car RN évolue très rapidement. Comment créer une fonction d'assistance globale dans React Native?

Je suis nouveau sur React Native.

Ce que je veux faire, c'est créer un fichier js plein de nombreuses fonctions réutilisables, puis l'importer dans les composants et l'appeler à partir de là.

Ce que j'ai fait jusqu'à présent peut sembler stupide mais je sais que vous allez le demander, alors les voici.

J'ai essayé de créer un nom de classe Chandu et de l'exporter comme ceci

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  TextInput,
  View
} from 'react-native';


export default class Chandu extends Component {

  constructor(props){
    super(props);
    this.papoy = {
      a : 'aaa'
    },
    this.helloBandu = function(){
      console.log('Hello Bandu');
    },
  }

  helloChandu(){
    console.log('Hello Chandu');
  }
}

Et puis je l'importe dans n'importe quel composant requis.

import Chandu from './chandu';

Et puis appelle ça comme ça

console.log(Chandu);
console.log(Chandu.helloChandu);
console.log(Chandu.helloBandu);
console.log(Chandu.papoy);

La seule chose qui a fonctionné était le premier console.log, ce qui signifie que j'importe le chemin correct, mais pas les autres.

Quelle est la bonne façon de procéder s'il vous plaît?

Réponses:


204

Remarque rapide: vous importez une classe, vous ne pouvez pas appeler de propriétés sur une classe à moins qu'il ne s'agisse de propriétés statiques. En savoir plus sur les classes ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Il existe cependant un moyen simple de le faire. Si vous créez des fonctions d'assistance, vous devriez plutôt créer un fichier qui exporte des fonctions comme celle-ci:

export function HelloChandu() {

}

export function HelloTester() {

}

Puis importez-les comme ceci:

import { HelloChandu } from './helpers'

ou...

import functions from './helpers' puis functions.HelloChandu


Ok je l'ai. Merci.
Je dois

2
Qu'en est-il de l'exportation d'un objet à la place, qui contient un tas de fonctions? Quels seraient également les avantages et les inconvénients d'exporter un tel objet par rapport à l'exportation d'une classe avec des propriétés statiques?
hippietrail le

2
Utiliser des exportations nommées comme nous le sommes ici n'est qu'un objet en cours d'exportation. C'est pourquoi vous pouvez déstructurer lors de l'importation. Faites import functions from './helpers'. functions. HelloChandusera là. functions est un objet contenant toutes les fonctions. Pour en savoir plus sur l'exportation, cliquez ici :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
zackify

2
L'inconvénient d'utiliser un tas de propriétés statiques sur une classe est que vous avez une classe sans raison. C'est comme utiliser une API dont vous n'avez pas besoin. Pourquoi voudriez-vous newcréer une classe uniquement pour les propriétés statiques? Exporter une fonction dans ce cas
zackify

D'un point de vue stylistique, les fonctions de js ne sont-elles généralement pas des "minuscules camel"?
J Woodchuck

75

Une alternative consiste à créer un fichier d'assistance dans lequel vous avez un objet const avec des fonctions comme propriétés de l'objet. De cette façon, vous n'exportez et importez qu'un seul objet.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Ensuite, importez comme ceci:

import helpers from './helpers';

et utilisez comme ceci:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');

Je sais que cela fait un moment, mais une question de suivi: existe-t-il un moyen efficace d'appeler l'une des fonctions d'assistance à partir d'une autre fonction d'assistance? Ie helper2: function (param1) {helper1 (); }? J'ai essayé avec this.helper1 () et juste helper1 () mais aucun n'a fonctionné.
Johan

1
@Johan tryhelper2: function(param1){ helpers.helper1(); }
c-chavez

C'est la méthode que vous utiliseriez si vous souhaitez accéder directement aux méthodes à partir d'un module / objet singulier. Je vous remercie!
Brett84c

25

Je suis sûr que cela peut aider. Créez fileA n'importe où dans le répertoire et exportez toutes les fonctions.

export const func1=()=>{
    // do stuff
}
export const func2=()=>{
    // do stuff 
}
export const func3=()=>{
    // do stuff 
}
export const func4=()=>{
    // do stuff 
}
export const func5=()=>{
    // do stuff 
}

Ici, dans votre classe de composant React, vous pouvez simplement écrire une instruction d'importation.

import React from 'react';
import {func1,func2,func3} from 'path_to_fileA';

class HtmlComponents extends React.Component {
    constructor(props){
        super(props);
        this.rippleClickFunction=this.rippleClickFunction.bind(this);
    }
    rippleClickFunction(){
        //do stuff. 
        // foo==bar
        func1(data);
        func2(data)
    }
   render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

Si je veux appeler l'action redux dans func1 avec this.props.action ... comment changer le code dans la classe de composant React? Je reçois undefined n'est pas un objet (évaluation de '_this.props.actions')
Justin Lok

J'ai ce que vous essayez de réaliser ici. ce que je peux suggérer, c'est de passer une fonction de rappel à func1. et à l'intérieur de la fonction de rappel, vous pouvez distribuer votre action avec this.props.action. une autre chose que vous devez garder à l'esprit est que vous devrez mapDispatchToProps, j'espère que vous le faites.
hannad rehman

pourquoi const? est-ce que cela fait une différence un mot-clé d'exportation avant le nom de la fonction?
Milon

@DinIslamMilon c'est ma seule préférence. si j'ai des fonctions dans un fichier / module séparé. Je les ferai comme const ou propriétés d'objets. Je n'utilise pas de fonctions directes ou n'exporte pas de fonctions directes. je ne vois aucun mal en utilisant autrement
hannad rehman

18

Pour réaliser ce que vous voulez et avoir une meilleure organisation grâce à vos fichiers, vous pouvez créer un index.js pour exporter vos fichiers d'assistance.

Disons que vous avez un dossier appelé / helpers . Dans ce dossier, vous pouvez créer vos fonctions divisées par contenu, actions ou tout ce que vous voulez.

Exemple:

/* Utils.js */
/* This file contains functions you can use anywhere in your application */

function formatName(label) {
   // your logic
}

function formatDate(date) {
   // your logic
}

// Now you have to export each function you want
export {
   formatName,
   formatDate,
};

Créons un autre fichier qui a des fonctions pour vous aider avec les tableaux:

/* Table.js */
/* Table file contains functions to help you when working with tables */

function getColumnsFromData(data) {
   // your logic
}

function formatCell(data) {
   // your logic
}

// Export each function
export {
   getColumnsFromData,
   formatCell,
};

Maintenant, l'astuce consiste à avoir un index.js dans le dossier helpers :

/* Index.js */
/* Inside this file you will import your other helper files */

// Import each file using the * notation
// This will import automatically every function exported by these files
import * as Utils from './Utils.js';
import * as Table from './Table.js';

// Export again
export {
   Utils,
   Table,
};

Vous pouvez maintenant importer puis séparément pour utiliser chaque fonction:

import { Table, Utils } from 'helpers';

const columns = Table.getColumnsFromData(data);
Table.formatCell(cell);

const myName = Utils.formatName(someNameVariable);

J'espère que cela peut vous aider à mieux organiser vos fichiers.


2

je préfère créer un dossier dont le nom est Utils et créer un index de page contenant ce que vous pensez aider

const findByAttr = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

const FUNCTION_NAME = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

export {findByAttr, FUNCTION_NAME}

Lorsque vous devez l'utiliser, il doit être importé en tant que use "{}" car vous n'avez pas utilisé le mot clé par défaut look

 import {FUNCTION_NAME,findByAttr} from'.whare file is store/utils/index'

0

Si vous souhaitez utiliser la classe, vous pouvez le faire.

Helper.js

  function x(){}

  function y(){}

  export default class Helper{

    static x(){ x(); }

    static y(){ y(); }

  }

App.js

import Helper from 'helper.js';

/****/

Helper.x
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.