Wie erstelle ich eine Hilfedatei voller Funktionen in React Native?

133

Obwohl es eine ähnliche Frage gibt, kann ich keine Datei mit mehreren Funktionen erstellen. Ich bin mir nicht sicher, ob die Methode bereits veraltet ist oder nicht, da sich RN sehr schnell entwickelt. Wie erstelle ich eine globale Hilfsfunktion in React Native?

Ich bin neu bei React Native.

Ich möchte eine js-Datei mit vielen wiederverwendbaren Funktionen erstellen, sie dann in Komponenten importieren und von dort aus aufrufen.

Was ich bisher gemacht habe, mag dumm aussehen, aber ich weiß, dass Sie danach fragen werden, also hier sind sie.

Ich habe versucht, einen Klassennamen Chandu zu erstellen und ihn so zu exportieren

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

Und dann importiere ich es in eine beliebige Komponente.

import Chandu from './chandu';

Und dann nenne es so

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

Das einzige, was funktioniert hat, war das erste console.log, was bedeutet, dass ich den richtigen Pfad importiere, aber keine anderen.

Was ist der richtige Weg, um dies bitte zu tun?

cjmling
quelle

Antworten:

203

Kurzer Hinweis: Wenn Sie eine Klasse importieren, können Sie keine Eigenschaften für eine Klasse aufrufen, es sei denn, es handelt sich um statische Eigenschaften. Weitere Informationen zu Klassen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Es gibt jedoch eine einfache Möglichkeit, dies zu tun. Wenn Sie Hilfsfunktionen erstellen, sollten Sie stattdessen eine Datei erstellen, die Funktionen wie folgt exportiert:

export function HelloChandu() {

}

export function HelloTester() {

}

Dann importiere sie wie folgt:

import { HelloChandu } from './helpers'

oder...

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

zackifizieren
quelle
Ok, ich habe es verstanden. Danke.
Ich muss
2
Wie wäre es stattdessen mit dem Exportieren eines Objekts, das eine Reihe von Funktionen enthält? Welche Vor- und Nachteile hätte der Export eines solchen Objekts gegenüber dem Export einer Klasse mit statischen Eigenschaften?
Hippietrail
2
Die Verwendung von benannten Exporten wie hier ist nur ein Objekt, das exportiert wird. Aus diesem Grund können Sie den Import zerstören. Tu es import functions from './helpers'. functions. HelloChanduwird da sein. Funktionen ist ein Objekt, das alle Funktionen enthält. Lesen Sie hier mehr über den Export :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
zackify
2
Der Nachteil der Verwendung einer Reihe statischer Eigenschaften für eine Klasse besteht darin, dass Sie eine Klasse ohne Grund haben. Es ist wie mit einer API, die Sie nicht brauchen. Warum sollten Sie neweine Klasse nur für statische Eigenschaften erstellen? Exportieren Sie in diesem Fall eine Funktion
zackify
Sind Funktionen in js stilistisch gesehen normalerweise nicht "Kleinbuchstaben"?
J Woodchuck
75

Eine Alternative besteht darin, eine Hilfsdatei zu erstellen, in der Sie ein const-Objekt mit Funktionen als Eigenschaften des Objekts haben. Auf diese Weise exportieren und importieren Sie nur ein Objekt.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Dann importieren Sie wie folgt:

import helpers from './helpers';

und verwenden Sie wie folgt:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');
c-chavez
quelle
Ich weiß, es ist eine Weile her, aber eine Folgefrage: Gibt es eine gute Möglichkeit, eine der Hilfsfunktionen aus einer anderen Hilfsfunktion heraus aufzurufen? Dh helper2: function (param1) {helper1 (); }? Ich habe es mit this.helper1 () und nur helper1 () versucht, aber keiner hat funktioniert.
Johan
1
@ Joan versuchenhelper2: function(param1){ helpers.helper1(); }
c-chavez
Dies ist die Methode, die Sie verwenden würden, wenn Sie direkt von einem einzelnen Modul / Objekt auf Methoden zugreifen möchten. Danke dir!
Brett84c
25

Ich bin sicher, das kann helfen. Erstellen Sie fileA an einer beliebigen Stelle im Verzeichnis und exportieren Sie alle Funktionen.

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 
}

Hier in Ihrer React-Komponentenklasse können Sie einfach eine Importanweisung schreiben.

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;
hannad rehman
quelle
Wenn ich mit this.props.action die Redux-Aktion in func1 aufrufen möchte ... wie ändere ich den Code in der React-Komponentenklasse? Ich werde undefiniert ist kein Objekt (Auswertung von '_this.props.actions')
Justin Lok
Ich habe bekommen, was Sie hier erreichen wollen. Ich kann vorschlagen, eine Rückruffunktion an func1 zu übergeben. und innerhalb der Rückruffunktion können Sie Ihre Aktion mit this.props.action auslösen. Eine weitere Sache, die Sie beachten müssen, ist, dass Sie mapDispatchToProps zuordnen müssen. Ich hoffe, Sie tun es.
Hannad Rehman
warum const? macht es einen Unterschied, ob ein Exportschlüsselwort vor dem Funktionsnamen steht?
Milon
@ DinIslamMilon ist nur meine Präferenz. wenn ich Funktionen in einer separaten Datei / einem separaten Modul habe. Ich werde sie als const oder Eigenschaften von Objekten machen. Ich benutze keine direkten Funktionen oder exportiere keine direkten Funktionen. Ich sehe keinen Schaden mit sonst
Hannad Rehman
18

Um das zu erreichen, was Sie möchten, und eine bessere Organisation Ihrer Dateien zu erreichen, können Sie eine index.js erstellen, um Ihre Hilfsdateien zu exportieren.

Angenommen, Sie haben einen Ordner namens / helpers . In diesem Ordner können Sie Ihre Funktionen nach Inhalten, Aktionen oder anderen Elementen erstellen.

Beispiel:

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

Erstellen wir eine weitere Datei mit Funktionen, die Ihnen bei Tabellen helfen:

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

Der Trick besteht nun darin, eine index.js im Ordner " helpers " zu haben:

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

Jetzt können Sie dann separat importieren, um jede Funktion zu verwenden:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Ich hoffe, es kann helfen, Ihre Dateien besser zu organisieren.

Italo Borges
quelle
2

Ich bevorzuge es, einen Ordner zu erstellen, dessen Name Utils ist, und einen Seitenindex zu erstellen, der das enthält, was Sie für hilfreich halten

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}

Wenn Sie dies verwenden müssen, sollte es als "{}" importiert werden, da Sie nicht das Standard-Keyword-Look verwendet haben

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

Wenn Sie class verwenden möchten, können Sie dies tun.

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
G. Guvenal
quelle