Jak stworzyć plik pomocniczy pełen funkcji w React Native?

Chociaż istnieje podobne pytanie, nie udaje mi się utworzyć pliku z wieloma funkcjami. Nie jestem pewien, czy metoda jest już przestarzała, czy nie, ponieważ RN rozwija się bardzo szybko. Jak stworzyć globalną funkcję pomocniczą w React Native?

Jestem nowy w React Native.

To, co chcę zrobić, to stworzyć plik js pełen wielu funkcji wielokrotnego użytku, a następnie zaimportować go do komponentów i wywołać go stamtąd.

To, co robiłem do tej pory, może wyglądać głupio, ale wiem, że poprosisz o to, więc oto one.

Próbowałem utworzyć nazwę klasy Chandu i wyeksportować ją w ten sposób

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

A następnie importuję go w dowolnym wymaganym komponencie.

import Chandu from './chandu';

A potem nazwij to tak

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

Jedyną rzeczą, która zadziałała, był pierwszy console.log, co oznacza, że ​​importuję poprawną ścieżkę, ale żadnych innych.

Jaki jest właściwy sposób, aby to zrobić?

Szybka uwaga: Importujesz klasę, nie możesz wywoływać właściwości klasy, chyba że są to właściwości statyczne. Przeczytaj więcej o zajęciach tutaj: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Jest na to jednak łatwy sposób. Jeśli tworzysz funkcje pomocnicze, powinieneś zamiast tego utworzyć plik, który eksportuje takie funkcje:

export function HelloChandu() {

}

export function HelloTester() {

}

Następnie zaimportuj je w ten sposób:

import { HelloChandu } from './helpers'

lub...

import functions from './helpers' następnie functions.HelloChandu

Alternatywą jest utworzenie pliku pomocniczego, w którym masz obiekt const z funkcjami jako właściwościami obiektu. W ten sposób eksportujesz i importujesz tylko jeden obiekt.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Następnie zaimportuj w ten sposób:

import helpers from './helpers';

i użyj w ten sposób:

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

Jestem pewien, że to może pomóc. Utwórz plikA w dowolnym miejscu katalogu i wyeksportuj wszystkie funkcje.

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 
}

Tutaj, w klasie komponentów Reacta, możesz po prostu napisać jedną instrukcję importu.

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;

Aby osiągnąć to, co chcesz i mieć lepszą organizację dzięki swoim plikom, możesz utworzyć plik index.js w celu wyeksportowania plików pomocniczych.

Powiedzmy, że masz folder o nazwie / helpers . W tym folderze możesz tworzyć swoje funkcje podzielone według zawartości, działań lub cokolwiek zechcesz.

Przykład:

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

Stwórzmy kolejny plik, który będzie zawierał funkcje pomocne przy tabelach:

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

Teraz sztuczka polega na umieszczeniu pliku index.js wewnątrz pliku folderze pomocników :

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

Teraz możesz zaimportować, a następnie osobno, aby użyć każdej funkcji:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Mam nadzieję, że pomoże to uporządkować pliki w lepszy sposób.

Wolę stworzyć folder, który nazywa się Utils, a wewnątrz stworzyć indeks strony zawierający to, co myślisz, że pomagasz

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}

Kiedy musisz tego użyć, należy go zaimportować jako użycie „{}”, ponieważ nie użyłeś domyślnego wyglądu słowa kluczowego

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

Jeśli chcesz korzystać z klasy, możesz to zrobić.

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