Comment créer un fichier d'aide rempli de fonctions en react native ?

Question

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à dépassée ou non car RN évolue très vite. Comment créer une fonction d'aide globale dans react native ?

Je suis novice en matière de React Native.

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

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

J'ai essayé de créer une classe nommée 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 ensuite je l'importe dans n'importe quel composant requis.

import Chandu from './chandu';

Et ensuite l'appeler comme ceci

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

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

Quelle est la manière correcte de procéder, s'il vous plaît ?

Answer 1

Note rapide : vous importez une classe, vous ne pouvez pas appeler les propriétés d'une classe à moins qu'il ne s'agisse de propriétés statiques. Pour en savoir plus sur les classes, cliquez 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'aide, vous devriez plutôt créer un fichier qui exporte les fonctions comme ceci :

export function HelloChandu() {

}

export function HelloTester() {

}

Ensuite, importez-les comme suit :

import { HelloChandu } from './helpers'

ou...

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

Answer 2

Une alternative est de créer un fichier d'aide où vous avez un objet const avec des fonctions comme propriétés de l'objet. De cette façon, vous n'exportez et n'importez qu'un seul objet.

aides.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Puis, importez comme ceci :

import helpers from './helpers';

et utiliser comme ceci :

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

Answer 3

Je suis sûr que cela peut aider. Créez le fichierA 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 déclaration 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;

Answer 4

Pour obtenir ce que vous voulez et avoir une meilleure organisation de vos fichiers, vous pouvez créer un index.js pour exporter vos fichiers d'aide.

Disons que vous avez un dossier appelé /aide . À l'intérieur de 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 contient 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 est d'avoir un index.js à l'intérieur du fichier aides dossier :

/* 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 les importer 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 qu'il pourra vous aider à mieux organiser vos fichiers.

Answer 5

Si vous voulez 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