Как создать вспомогательный файл, полный функций в реагировании на родной?

Хотя есть похожий вопрос, я не могу создать файл с несколькими функциями. Не уверен, что метод уже устарел или нет, так как 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, что означает, что я импортирую правильный путь, но не любые другие.

Как правильно это сделать, пожалуйста?

Ответы

Ответ 1

Быстрое примечание. Вы импортируете класс, вы не можете вызывать свойства класса, если они не являются статическими свойствами. Подробнее о классах читайте здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Там есть простой способ сделать это. Если вы выполняете вспомогательные функции, вы должны сделать файл, который экспортирует такие функции:

export function HelloChandu() {

}

export function HelloTester() {

}

Затем импортируйте их так:

import { HelloChandu } from './helpers'

Ответ 2

Альтернативой является создание вспомогательного файла, в котором у вас есть объект 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');

Ответ 3

Я уверен, что это может помочь. Создайте файл 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;

Ответ 4

Чтобы добиться того, чего вы хотите, и лучше организовать свои файлы, вы можете создать файл 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);

Надеюсь, это поможет организовать ваши файлы лучше.