Soy nuevo en reaccionar js, mi problema es que quiero crear una clase que funcione como ayudante global que quiero utilizar en otra clase o componente.
Caso de uso para, por ejemplo, primero quiero obtener todas las palabras clave de la lista de restaurantes ingresadas por el usuario si el usuario selecciona cualquier restaurante, entonces quiero obtener los detalles del restaurante. en este caso de uso, tengo que hacer dos llamadas ajax. Quiero crear una función auxiliar global de ajax que pueda usar en otros componentes.
class AjaxHelperClass{ ResturantAPI(url){ $.ajax({ url : url, success : function(res){} }); } } export default AjaxHelperClass;en mi otro componente que uso de mi función 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'));Crea un archivo llamado helpers.js
//helpers.js export const AjaxHelper = (url) => { return ( //ajax stuff here ); }Luego en tu componente:
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> ); } }Hay un enfoque más envolviéndolo en una clase en lugar de mantener todos los métodos abiertos y flotando alrededor de utils.js
//utilsjs default export class Utils { static utilMethod = (data) => { return ( //methods stuff here ); } }y luego en tu componente
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'));La forma en que ha exportado la clase requiere una nueva instancia para cada módulo en el que la importe. En su lugar, puede usar una sola instancia como mencionó exportando un objeto AjaxHelperClass instanciado en lugar de la definición de clase, algo así como
export default new AjaxHelperClass(); Esto efectivamente le da un objeto global. Al importar el objeto, puede llamar a sus funciones miembro, es decir, AjaxHelperClass.ResturantAPI(); . Otra opción es usar métodos estáticos en su lugar si todo lo que desea usar la clase es un espacio de nombres: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static