webentwicklung-frage-antwort-db.com.de

wie erstellt man eine allgemeine Hilfsklasse in React JS mit ES6, die von einer anderen Komponente verwendet wird?

Ich bin neu in reagieren js, mein Problem ist, dass ich eine Klasse erstellen möchte, die als globaler Helfer fungiert, den ich in einer anderen Klasse oder Komponente verwenden möchte. 

Anwendungsfall für z. B. Zuerst möchte ich alle vom Benutzer eingegebenen Schlüsselwörter für die Resturant-Liste abrufen. Wenn der Benutzer ein Resturant auswählt, dann möchte ich Resturant-Details erhalten. In diesem Anwendungsfall muss ich zwei Ajax-Aufrufe machen. Ich möchte eine globale Ajax-Helper-Funktion erstellen, die ich in anderen Komponenten verwenden kann.

class AjaxHelperClass{

    ResturantAPI(url){

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

    }
}

    export default AjaxHelperClass;

in meiner anderen Komponente, die von meiner AjaxHelperClass-Funktion verwendet wird: 

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

Erstellen Sie eine Datei mit dem Namen helpers.js

//helpers.js

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

export default AjaxHelper;

Dann in Ihrer Komponente:

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

Die Art und Weise, wie Sie die Klasse exportiert haben, erfordert für jedes Modul, in das Sie sie importieren, eine neue Instanz. Sie können stattdessen eine einzelne Instanz wie erwähnt verwenden, indem Sie ein instanziiertes AjaxHelperClass-Objekt anstelle der Klassendefinition exportieren

export default new AjaxHelperClass();

Dadurch erhalten Sie effektiv ein globales Objekt. Wenn Sie ein Objekt importieren, können Sie seine Member-Funktionen aufrufen, d. H. AjaxHelperClass.ResturantAPI();. Eine andere Option ist die Verwendung von static -Methoden, wenn Sie die Klasse nur für einen Namespace verwenden möchten - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/. Klassen/statisch

5
Max Sindwani

Eine andere Möglichkeit, die Sie nicht benötigen, ist das Importieren bestimmter Hilfsmethoden, indem Sie einfach eine Object in Ihre Hilfsdatei exportieren: 

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

Ich denke, dass es eine Paketgrößenstrafe geben kann, wenn die Funktionen der Module nicht spezifisch eingeschlossen werden, aber der Convenience-Faktor kann meiner Meinung nach diese Strafe oft überwiegen.

0
Joshua Pinter

Es gibt einen weiteren Ansatz, indem es von einer Klasse umschlossen wird, anstatt alle Methoden offen zu halten und umher zu schwimmen utils.js

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

und dann in Ihrer Komponente

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