如何使用另一个组件使用的ES6在React JS中创建公共帮助器类？

Question

我是一个新的反应js,我的问题是我想创建一个类,它将作为全局帮助程序,我想在另一个类或组件中使用.

用例例如,首先我想获取用户输入的所有resturant list关键字,如果用户选择任何resturant,那么我想获得resturant详细信息.在这个用例中我必须进行两次ajax调用我想创建全局的ajax辅助函数,我可以在其他组件中使用它.

class AjaxHelperClass{

    ResturantAPI(url){

        $.ajax({
            url : url,
            success : function(res){}
        });

    }
}

    export default AjaxHelperClass;

在我的另一个使用我的AjaxHelperClass函数的组件中:

import React from 'react';
import {render} from 'react-dom';
import {AjaxHelperClass} from "./module/AjaxHelperClass"

class App extends React.Component {

    constructor(props) {
        super(props);

      ///  AjaxHelperClass.ResturantAPI(); // or
    let myajaxresult= new AjaxHelperClass(url);

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));

Answer 1

创建一个名为的文件 helpers.js

//helpers.js

const AjaxHelper = (url) => {
    return (
      //ajax stuff here
    );
}

export default AjaxHelper;

然后在你的组件中:

import React from 'react';
import {render} from 'react-dom';
import {AjaxHelper} from "./path/to/helpers.js"

class App extends React.Component {

    constructor(props) {
        super(props);
        let myajaxresult = AjaxHelper(url);
    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

Answer 2

导出类的方式需要为导入它的每个模块创建一个新实例.相反,您可以通过导出实例化的AjaxHelperClass对象而不是类定义来使用单个实例 - 类似于

export default new AjaxHelperClass();

这有效地为您提供了一个全局对象.导入对象时,可以调用其成员函数,即AjaxHelperClass.ResturantAPI();.另一种选择是使用静态方法,如果你想要使用的类是名称空间 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

Answer 3

还有一种方法是通过类将其包装起来，而不是使所有方法都保持打开和浮动状态 utils.js

//utilsjs
default export class Utils {
    static utilMethod = (data) => {
        return (
          //methods stuff here
        );
    }
}

然后在你的组件中

import React from 'react';
import {render} from 'react-dom';
import Utils from "./utils"

 class App extends React.Component {

    constructor(props) {
        super(props);
        let myData = {}; // any arguments of your
        Utils.utilMethod(myData);

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));