Як створити допоміжний файл, повний функцій у реагуванні рідного?

Хоча є подібне питання, я не можу створити файл з декількома функціями. Не впевнений, чи метод вже застарів чи ні, оскільки RN розвивається дуже швидко. Як створити глобальну функцію помічника у реагуванні рідних?

Я новачок у React Native.

Що я хочу зробити, це створити js-файл, що містить багато функцій багаторазового використання, а потім імпортувати його в компоненти та викликати звідти.

Те, що я робив до цих пір, може виглядати дурним, але я знаю, що ви попросите це так, ось вони.

Я спробував створити ім’я класу Chandu та експортувати його так

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

І тоді я імпортую його в будь-який необхідний компонент.

import Chandu from './chandu';

А потім називайте це так

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

Єдине, що працювало, це перший console.log, це означає, що я імпортую правильний шлях, але не будь-який інший.

Який правильний спосіб зробити це, будь ласка?

Швидка примітка: Ви імпортуєте клас, ви не можете викликати властивості класу, якщо вони не є статичними властивостями. Детальніше про заняття читайте тут: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Однак це є простий спосіб зробити це. Якщо ви робите допоміжні функції, вам слід створити файл, який експортує такі функції:

export function HelloChandu() {

}

export function HelloTester() {

}

Потім імпортуйте їх так:

import { HelloChandu } from './helpers'

або ...

import functions from './helpers' тоді functions.HelloChandu

Альтернативою є створення файлу-помічника, де у вас є об'єкт const з функціями як властивості об'єкта. Таким чином ви експортуєте та імпортуєте лише один об’єкт.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Потім імпортуйте так:

import helpers from './helpers';

і використовувати так:

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

Я впевнений, що це може допомогти. Створіть файлA в будь-якому місці каталогу та експортуйте всі функції.

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 
}

Тут, у вашому класі компонентів React, ви можете просто написати одну заяву про імпорт.

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;

Щоб досягти того, що ви хочете, і мати кращу організацію за допомогою своїх файлів, ви можете створити index.js для експорту своїх файлів-помічників.

Скажімо, у вас папка з назвою / helpers . Всередині цієї папки ви можете створювати свої функції, розділені на зміст, дії чи будь-що, що вам подобається.

Приклад:

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

Створимо ще один файл, який має функції, щоб допомогти вам з таблицями:

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

Тепер хитрість полягає в тому, щоб мати index.js всередині папки помічників :

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

Тепер ви можете імпортувати потім окремо, щоб використовувати кожну функцію:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Сподіваємось, це може допомогти краще організувати ваші файли.

Я вважаю за краще створити папку, його звуть Utils, а всередині створити індекс сторінок, який містить те, що, на вашу думку, допомагає

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}

Якщо вам потрібно використовувати це, його слід імпортувати як "{}", оскільки ви не використовували вигляд ключового слова за замовчуванням

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

Якщо ви хочете використовувати клас, ви можете це зробити.

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