Bagaimana cara membuat file pembantu yang penuh dengan fungsi di reaksi asli?

Meskipun ada pertanyaan serupa saya gagal membuat file dengan banyak fungsi. Tidak yakin apakah metode ini sudah usang atau tidak karena RN berkembang sangat cepat. Bagaimana cara membuat fungsi global helper di reaksi asli?

Saya baru mengenal Bereaksi Asli.

Yang ingin saya lakukan adalah membuat file js penuh dengan banyak fungsi yang dapat digunakan kembali dan kemudian mengimpornya dalam komponen dan menyebutnya dari sana.

Apa yang telah saya lakukan sejauh ini mungkin terlihat bodoh tetapi saya tahu Anda akan memintanya jadi di sini mereka.

Saya mencoba membuat nama kelas Chandu dan mengekspornya seperti ini

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

Dan kemudian saya mengimpornya di Komponen yang diperlukan.

import Chandu from './chandu';

Dan kemudian menyebutnya seperti ini

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

Satu-satunya hal yang berhasil adalah console.log pertama, yang berarti saya mengimpor jalur yang benar, tetapi tidak yang lain.

Apa cara yang benar untuk melakukan ini?

Catatan cepat: Anda mengimpor kelas, Anda tidak dapat memanggil properti di kelas kecuali mereka adalah properti statis. Baca lebih lanjut tentang kelas di sini: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Namun, ada cara mudah untuk melakukan ini. Jika Anda membuat fungsi pembantu, Anda sebaiknya membuat file yang mengekspor fungsi seperti ini:

export function HelloChandu() {

}

export function HelloTester() {

}

Kemudian impor mereka seperti ini:

import { HelloChandu } from './helpers'

atau...

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

Alternatifnya adalah membuat file pembantu di mana Anda memiliki objek const dengan fungsi sebagai properti objek. Dengan cara ini Anda hanya mengekspor dan mengimpor satu objek.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Kemudian, impor seperti ini:

import helpers from './helpers';

dan gunakan seperti ini:

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

Saya yakin ini bisa membantu. Buat fileA di mana saja di direktori dan ekspor semua fungsi.

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 
}

Di sini, di kelas komponen Bereaksi Anda, Anda bisa menulis satu pernyataan impor.

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;

Untuk mencapai apa yang Anda inginkan dan memiliki organisasi yang lebih baik melalui file Anda, Anda dapat membuat index.js untuk mengekspor file pembantu Anda.

Katakanlah Anda memiliki folder bernama / pembantu . Di dalam folder ini Anda dapat membuat fungsi Anda dibagi dengan konten, tindakan, atau apa pun yang Anda suka.

Contoh:

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

Mari kita buat file lain yang memiliki fungsi untuk membantu Anda dengan tabel:

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

Sekarang triknya adalah memiliki index.js di dalam folder 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,
};

Sekarang Anda dapat mengimpor lalu secara terpisah untuk menggunakan setiap fungsi:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Semoga bisa membantu mengatur file Anda dengan cara yang lebih baik.

Saya lebih suka membuat folder namanya Utils dan di dalam membuat indeks halaman yang berisi apa yang Anda pikir Anda bantu

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}

Ketika Anda perlu menggunakannya, ini harus diimpor menggunakan "{}" karena Anda tidak menggunakan tampilan kata kunci default

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

Jika Anda ingin menggunakan kelas, Anda bisa melakukan ini.

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