如何在本机反应中创建充满功能的帮助文件？

Question

虽然有一个类似的问题，但我无法创建具有多个功能的文件。不确定该方法是否已经过时，因为 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，这意味着我正在导入正确的路径，但不是任何其他路径。

请问这样做的正确方法是什么？

原文由 cjmling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

快速说明：您正在导入一个类，除非它们是静态属性，否则您不能调用类的属性。在此处阅读有关课程的更多信息： 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

原文由 zackify 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 c-chavez 发布，翻译遵循 CC BY-SA 4.0 许可协议