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

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?

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

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 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;

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.

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'

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