Como criar um arquivo auxiliar cheio de funções em reagir nativo?


133

Embora exista uma pergunta semelhante, não estou conseguindo criar um arquivo com várias funções. Não tenho certeza se o método já está desatualizado ou não, pois o RN está evoluindo muito rapidamente. Como criar uma função auxiliar global em reagir nativo?

Eu sou novo no React Native.

O que eu quero fazer é criar um arquivo js cheio de muitas funções reutilizáveis ​​e depois importá-lo em componentes e chamá-lo a partir daí.

O que venho fazendo até agora pode parecer estúpido, mas sei que você o solicitará, e aqui estão eles.

Tentei criar um nome de classe Chandu e exportá-lo assim

'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');
  }
}

E então eu o importo em qualquer Componente necessário.

import Chandu from './chandu';

E então chame assim

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

A única coisa que funcionou foi o primeiro console.log, o que significa que estou importando o caminho correto, mas não outros.

Qual é a maneira correta de fazer isso, por favor?

Respostas:


203

Nota rápida: você está importando uma classe, não pode chamar propriedades em uma classe, a menos que sejam propriedades estáticas. Leia mais sobre as aulas aqui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Existe uma maneira fácil de fazer isso, no entanto. Se você estiver criando funções auxiliares, crie um arquivo que exporte funções como esta:

export function HelloChandu() {

}

export function HelloTester() {

}

Em seguida, importe-os da seguinte forma:

import { HelloChandu } from './helpers'

ou...

import functions from './helpers' então functions.HelloChandu


Ok, entendi Obrigado. Tem que ler alguns a partir daqui exploringjs.com/es6/ch_modules.html
cjmling

2
Que tal exportar um objeto que contenha várias funções? Além disso, quais seriam os prós e os contras de exportar um objeto desse tipo versus exportar uma classe com propriedades estáticas?
hippietrail 4/09/17

2
Usar exportações nomeadas como estamos aqui é apenas um objeto sendo exportado. É por isso que você pode desestruturar na importação. Faça import functions from './helpers'. functions. HelloChanduestarei lá. funções é um objeto que contém todas as funções. Leia sobre exportação aqui :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
zackify

2
O truque de usar um monte de propriedades estáticas em uma classe é que você tem uma classe sem motivo. É como usar uma API que você não precisa. Por que você criaria newuma classe apenas para propriedades estáticas? Exportar uma função nesse caso
zackify

Estilisticamente falando, as funções em js não costumam ser "caixas inferiores de camelo"?
J marmota

75

Uma alternativa é criar um arquivo auxiliar em que você tenha um objeto const com funções como propriedades do objeto. Dessa forma, você exporta e importa apenas um objeto.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Em seguida, importe assim:

import helpers from './helpers';

e use assim:

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

Sei que já faz um tempo, mas uma pergunta de acompanhamento: existe uma maneira clara de chamar uma das funções auxiliares de outra função auxiliar? Ou seja, helper2: function (param1) {helper1 (); }? Eu tentei com this.helper1 () e apenas helper1 (), mas nenhum funcionou.
23419 Johan

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

Este é o método que você usaria se quiser acessar métodos diretamente de um módulo / objeto singular. Obrigado!
Brett84c 07/09/19

25

Tenho certeza que isso pode ajudar. Crie fileA em qualquer lugar do diretório e exporte todas as funções.

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 
}

Aqui, na sua classe de componente React, você pode simplesmente escrever uma instrução de importação.

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;

Se eu quiser chamar ação redux em func1 com this.props.action ... como altero o código na classe de componente React? Estou ficando indefinida não é um objeto (avaliando '_this.props.actions')
Justin Lok

Eu tenho o que você está tentando alcançar aqui. o que posso sugerir é passar uma função de retorno de chamada para func1. e dentro da função de retorno de chamada, você pode despachar sua ação com this.props.action. mais uma coisa que você precisa ter em mente é que precisará mapDispatchToProps, espero que esteja fazendo isso.
21117 hannad rehman

por que const? faz alguma diferença uma palavra-chave de exportação antes do nome da função?
Milon

@DinIslamMilon é apenas minha preferência. se eu tiver funções em arquivo / módulo separados. eu os farei como const ou propriedades de objetos. não uso funções diretas nem exporto funções diretas. Eu não vejo nenhum mal usando de outra forma
rehman hannad

18

Para alcançar o que deseja e ter uma organização melhor por meio de seus arquivos, você pode criar um index.js para exportar seus arquivos auxiliares.

Digamos que você tenha uma pasta chamada / helpers . Dentro desta pasta, você pode criar suas funções divididas por conteúdo, ações ou qualquer coisa que desejar.

Exemplo:

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

Vamos criar outro arquivo que possui funções para ajudá-lo com tabelas:

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

Agora, o truque é ter um index.js dentro da pasta 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,
};

Agora você pode importar separadamente para usar cada função:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Espero que ajude a organizar seus arquivos de uma maneira melhor.


2

Eu prefiro criar uma pasta, o nome dele é Utils e dentro de criar um índice de página que contém o que você acha que ajuda

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}

Quando você precisar usar isso, ele deverá ser importado como use "{}" porque você não usou a aparência de palavra-chave padrão

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

0

Se você quiser usar a classe, você pode fazer isso.

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.