Question

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

例如，如果用户选择任何resturant，我想获取用户输入的所有resturant list关键字，然后我想获取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

创建名为global some global i i=0 some=[] names=['electric charge','permitivity of the medium','permitiovity of free space','relative permitivity of the medium','intensity of the electric field','electric potential at a point','electric potential energy','dipole moment','torque acting on the dipole','electric flux','linear charge density of the conductor','surface charge density of the conductor','capacitance of a parallel plate capacitor','practical unit of capacitance'] answer=['C','C2N-1m-2','C2N-1m-2','no unit','NC-1 or Vm-1','V','J','Cm','Nm','Nm2C-1','Cm-1','Cm-2','F','uF or pF'] def loop(i): for i in range(i,len(names)): global qno qno=random.randint(0,len(names)) if i>0: for k in range(0,len(some)): if str(qno)==some[len(some)-1]: loop(i-1) print(names[qno]) print('Type your answer') tell=input() if tell==answer[qno]: print('Right answer.Move on') else: print('Wrong answer,.The answer is '+answer[qno]) for j in range(i+1): some.append(str(qno)) i=i+1 loop(i) `

的文件

helpers.js

然后在你的组件中：

//helpers.js

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

export default AjaxHelper;

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

Answer 4

另一种不需要导入特定辅助方法的方法是仅在辅助文件中导出Object：

Helpers.js

export default { 

  connectToRestaurant: (url) => {

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

  },

  orderPizza: ( toppings = {} ) => {
    // Order a pizza with some sweet toppings.
  }

}

index.js

import Helpers from "Helpers";

Helpers.connectToRestaurant( "http://delicious.com/" );

Helpers.orderPizza( { cheese: true, pepporoni: true } );

我认为可能由于不具体包括模块中的功能而造成包装尺寸的损失，但是我认为便利性因素通常会超过该损失。

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

4 个答案: