cách tạo lớp trợ giúp chung trong React JS bằng ES6 được sử dụng bởi một thành phần khác?

Question

Tôi là một mới trong js phản ứng, vấn đề của tôi là tôi muốn tạo ra một lớp mà sẽ làm việc như helper toàn cầu mà tôi muốn sử dụng trong một lớp hoặc thành phần.

Trường hợp sử dụng cho ví dụ: Trước tiên, tôi muốn tìm nạp tất cả từ khóa danh sách resturant do người dùng nhập nếu người dùng chọn bất kỳ nhà cung cấp nào sau đó tôi muốn nhận các chi tiết bảo mật. trong trường hợp sử dụng này, tôi phải thực hiện hai cuộc gọi ajax Tôi muốn tạo chức năng trợ giúp ajax toàn cầu mà tôi có thể sử dụng trong các thành phần khác.

class AjaxHelperClass{ 

    ResturantAPI(url){ 

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

    } 
} 

    export default AjaxHelperClass; 

trong một thành phần có sử dụng từ chức năng AjaxHelperClass tôi:

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

Tạo một tập tin gọi helpers.js

//helpers.js 

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

export default AjaxHelper; 

Sau đó, trong thành phần của bạn:

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

Cách mà bạn đã xuất khẩu các lớp đòi hỏi một trường hợp mới cho mỗi mô-đun bạn nhập nó vào. Bạn có thể, thay vào đó, sử dụng một trường hợp duy nhất như bạn đã đề cập bằng cách xuất một đối tượng AjaxHelperClass instantiated chứ không phải là định nghĩa lớp - một cái gì đó giống như

export default new AjaxHelperClass(); 

này một cách hiệu quả mang lại cho bạn một đối tượng toàn cầu. Khi nhập đối tượng, bạn có thể gọi các chức năng thành viên của nó, tức là AjaxHelperClass.ResturantAPI();. Một lựa chọn khác là sử dụng tĩnh phương pháp thay vì nếu tất cả các bạn muốn sử dụng lớp cho được một không gian tên - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static