jak utworzyć wspólną klasę pomocniczą w React JS przy użyciu ES6, który jest używany przez inny komponent?

Question

Jestem nowy w reagowaniu js, mój problem polega na tym, że chcę stworzyć klasę, która będzie działać jako globalny pomocnik, który chcę wykorzystać w innej klasie lub komponencie.

Przykład użycia Najpierw chcę pobrać wszystkie słowa kluczowe z listy restauracji wprowadzone przez użytkownika, jeśli użytkownik wybierze restaurację, a następnie chcę uzyskać szczegóły dotyczące restauracji. w tym przypadku użycia muszę wykonać dwa wywołania ajax Chcę utworzyć funkcję globalnego pomocnika ajax, które można użyć w innych składnikach.

class AjaxHelperClass{ 

    ResturantAPI(url){ 

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

    } 
} 

    export default AjaxHelperClass; 

w moim innym składnikiem, które korzystają z mojej funkcji 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

Utwórz plik o nazwie helpers.js

//helpers.js 

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

export default AjaxHelper; 

Następnie w składniku:

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

Sposób, w jaki zostały wyeksportowane klasę wymaga nową instancję dla każdego modułu go zaimportować. Można zamiast tego użyć pojedynczego instancji jak już wspomniano przez eksportowania instancję obiektu AjaxHelperClass zamiast definicję klasy - coś jak

export default new AjaxHelperClass(); 

To skutecznie daje globalny obiekt. Podczas importowania obiektu można wywoływać jego funkcje składowe, tj. AjaxHelperClass.ResturantAPI();. Inną opcją jest użycie metod statycznych zamiast jeśli chcemy użyć klasy za to przestrzeń nazw - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static