web-dev-qa-db-fra.com

comment créer une classe d'assistance commune dans React JS à l'aide de ES6 utilisée par un autre composant?

Je suis un nouveau dans react js, mon problème est que je veux créer une classe qui fonctionnera comme une aide globale que je veux utiliser dans une autre classe ou un autre composant. 

Cas d’utilisation, par exemple Tout d’abord, je veux récupérer tous les mots clés de la liste des restaurants entrés par l’utilisateur si l’utilisateur sélectionne un restaurant, puis je souhaite obtenir les détails du restaurant. dans ce cas d'utilisation, je dois effectuer deux appels ajax pour créer une fonction d'assistance globale ajax que je peux utiliser dans d'autres composants.

class AjaxHelperClass{

    ResturantAPI(url){

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

    }
}

    export default AjaxHelperClass;

dans mon autre composant qui utilise depuis ma fonction 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
8
nancy

Créez un fichier appelé helpers.js

//helpers.js

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

export default AjaxHelper;

Puis dans votre composant:

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

La manière dont vous avez exporté la classe nécessite une nouvelle instance pour chaque module dans lequel vous l'importez. Vous pouvez, à la place, utiliser une seule instance, comme vous l'avez mentionné, en exportant un objet AjaxHelperClass instancié plutôt que la définition de classe - quelque chose comme:

export default new AjaxHelperClass();

Cela vous donne effectivement un objet global. Lors de l'importation de l'objet, vous pouvez appeler ses fonctions membres i.e AjaxHelperClass.ResturantAPI();. Une autre option consiste à utiliser les méthodes static à la place si vous souhaitez uniquement utiliser la classe est un espace de nom - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Classes/statique

5
Max Sindwani

Une autre façon de le faire qui ne vous oblige pas à importer des méthodes d'assistance spécifiques consiste simplement à exporter une Object dans votre fichier d'assistance: 

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

Je pense qu'il pourrait y avoir une pénalité de taille de paquet en n'incluant pas spécifiquement les fonctions des modules, mais le facteur de commodité, à mon avis, peut souvent compenser cette pénalité.

0
Joshua Pinter

Il y a une autre approche en l'enveloppant dans une classe plutôt qu'en laissant toutes les méthodes ouvertes et flottantes utils.js

//utilsjs
default export class Utils {
    static utilMethod = (data) => {
        return (
          //methods stuff here
        );
    }
}

puis dans votre composant

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'));
0
Saurabh Bayani