Wie erstelle ich eine Hilfedatei voller Funktionen in React Native?

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?

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

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

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;

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.

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'

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