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

Question

>我是 react js 中的新手，我的问题是我想创建一个可以作为全局助手的类，我想在另一个类或组件中使用它。

例如用例

首先，如果用户选择任何餐厅，我想获取用户输入的所有餐厅列表关键字，然后我想获取餐厅详细信息。 在这个用例中，我必须进行两次 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
export const AjaxHelper = (url) => {
    return (
      //ajax stuff here
    );
}

然后在组件中：

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

还有一种方法是用类包装它，而不是让所有方法都保持打开和浮动 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'));

Answer 3

导出类的方式需要为导入到的每个模块创建一个新实例。相反，你可以使用单个实例，如你所提到的，通过导出一个实例化的AjaxHelperClass对象而不是类定义 - 类似于

export default new AjaxHelperClass();

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

Answer 4

另一种无需导入特定帮助程序方法的方法就是在帮助程序文件中导出Object：

助手.js

export default { 
  connectToRestaurant: (url) => {
      $.ajax({
          url : url,
          success : function(res){}
      });
  },
  orderPizza: ( toppings = {} ) => {
    // Order a pizza with some sweet toppings.
  }
}

索引.js

import Helpers from "Helpers";
Helpers.connectToRestaurant( "http://delicious.com/" );
Helpers.orderPizza( { cheese: true, pepperoni: true } );

我认为如果不专门包含模块的功能，可能会有包大小的损失，但在我看来，便利性因素通常可以超过这种损失。