web-dev-qa-db-fra.com

Comment créer un fichier d'assistance complet de fonctions dans réagit natif?

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 contenant de nombreuses fonctions réutilisables, puis l'importer dans des composants et l'appeler à partir de là.

Ce que j'ai fait jusqu'ici peut paraître 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 appelez 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 fichier console.log, ce qui signifie que j'importais le bon chemin, mais aucun autre.

Quelle est la bonne façon de faire ceci s'il vous plaît?

reactjsreact-native
94
cjmling

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

Il y a un moyen facile de faire cela, cependant. Si vous créez des fonctions d’aide, créez plutôt un fichier qui exporte les fonctions suivantes:

export function HelloChandu() {

}

export function HelloTester() {

}

Puis importez-les comme ceci:

import { HelloChandu } from './helpers'

146
zackify

Une alternative consiste à créer un fichier d'assistance dans lequel vous avez un objet const avec des fonctions en tant que propriétés de l'objet. De cette façon, vous exportez et importez 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 utiliser comme ceci:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');
52
c-chavez

Je suis sûr que cela peut aider. Créez le fichier A 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 composants 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;
19
hannad rehman

Pour obtenir ce que vous voulez et mieux organiser vos fichiers, vous pouvez créer un fichier index.js pour exporter vos fichiers auxiliaires.

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 tables:

/* 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 fichier 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,
};

Maintenant, vous pouvez importer ensuite 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 aider à organiser vos fichiers d'une meilleure façon.

8
Italo Borges

je préfère créer un dossier dont le nom est Utils et à l'intérieur de 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 avez besoin de l'utiliser, vous devez l'importer avec le nom "{}", car vous n'avez pas utilisé le mot-clé par défaut.

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