javascript - 如何使用另一个组件使用的 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>
        );
    }
}