別のコンポーネントで使用されているES6を使用してReact JSで共通ヘルパークラスを作成する方法はありますか？

Question

私はreact jsで新しいです、私の問題は、私が別のクラスやコンポーネントで利用したいグローバルヘルパーとして動作するクラスを作成したいということです。

ユースケース例まず、ユーザーが任意のレストランを選択すると入力されたすべてのレストランリストのキーワードを取得したいと思います。この使用例では、私は2つのajax呼び出しを作成する必要があります。私は他のコンポーネントで使用できるグローバルなajaxヘルパー関数を作成したいと思います。私AjaxHelperClass関数から使用し、私の別のコンポーネントで

class AjaxHelperClass{ 

    ResturantAPI(url){ 

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

    } 
} 

    export default 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