Başka bir bileşen tarafından kullanılan ES6'yı kullanarak React JS'de ortak yardımcı sınıfı nasıl oluşturulur?

Question

Ben yeni bir tepki js'im, problemim, başka bir sınıf veya bileşende kullanmak istediğim global bir yardımcı olarak çalışacak bir sınıf yaratmak istiyorum.

Kullanım için ilk önce Kullanıcı tarafından herhangi bir restoran seçtiyseniz kullanıcı tarafından girilen tüm resturant listesi anahtar kelimelerini almak istiyorum, ardından restoran detayları almak istiyorum. Bu durumda, diğer bileşenlerde kullanabileceğim global ajax yardımcı işlevini oluşturmak istediğim iki ajax çağrısı yapmam gerekiyor. Benim AjaxHelperClass işlevinden kullanmak benim başka bileşende

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

sizin bileşeninde Sonra

//helpers.js 

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

export default AjaxHelper; 

helpers.js

adlı bir dosya oluşturun:

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

Sınıfa ihraç ettik yolu içe her modül için yeni bir örneğini gerektirir. şey

export default new AjaxHelperClass(); 

Bu etkin size global bir nesne sağlar gibi - Bir örneği AjaxHelperClass nesnesi yerine sınıf tanımını ihraç ederek söz ettik gibi, bunun yerine, tek bir örneğini kullanabilirsiniz. Nesneyi içe aktarırken, üye işlevlerini (AjaxHelperClass.ResturantAPI();) arayabilirsiniz. Başka bir seçenek, tüm sizin için sınıfını kullanmak istiyorsanız yerine statik yöntemlerinin kullanıldığı bir ad olduğunu - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static