web-dev-qa-db-ja.com

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

私はreact jsの初心者です。私の問題は、別のクラスまたはコンポーネントで利用したいグローバルヘルパーとして機能するクラスを作成したいです。

たとえば、ユースケースでは、ユーザーがレストランを選択した場合、ユーザーが入力したすべてのレストランリストキーワードを取得し、レストランの詳細を取得します。この使用例では、2つの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'));
javascriptoopreactjsecmascript-6
12
nancy

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>
        );
    }
}
18
patrick

クラスをエクスポートした方法では、インポートするモジュールごとに新しいインスタンスが必要です。代わりに、クラス定義ではなくインスタンス化されたAjaxHelperClassオブジェクトをエクスポートすることで、前述のように単一のインスタンスを使用できます。

_export default new AjaxHelperClass();
_

これにより、事実上グローバルオブジェクトが得られます。オブジェクトをインポートするとき、そのメンバー関数、つまりAjaxHelperClass.ResturantAPI();を呼び出すことができます。別のオプションは、クラスを使用するのが名前空間だけである場合、代わりにstaticメソッドを使用することです- https：// developer。 mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

7
Max Sindwani

すべてのメソッドを開いたままにして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'));
5
Saurabh Bayani

特定のヘルパーメソッドをインポートする必要のない別の方法は、ヘルパーファイルで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 } );

モジュールの機能を具体的に含めないことでパッケージサイズのペナルティが生じる可能性があると思いますが、私の意見では、利便性の要因がそのペナルティを上回ることがよくあります。

1
Joshua Pinter