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

我相信这会有所帮助。在目录中的任意位置创建 fileA 并导出所有函数。

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 语句。

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

现在的诀窍是在helpers文件夹中有一个 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,
};

现在您可以分别导入 then 以使用每个函数：

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

希望它可以帮助以更好的方式组织您的文件。

如果你想使用类，你可以这样做。

Helper.js

  function x(){}

  function y(){}

  export default class Helper{

    static x(){ x(); }

    static y(){ y(); }

  }

应用程序.js

import Helper from 'helper.js';

/****/

Helper.x