Estoy tratando de pasar el servicio como contexto y luego usarlo en la aplicación, pero aparece el error "service.getItems no es una función". ¿Qué está mal? Sé que podría importarlo y usarlo, pero estoy tratando de aprender el contexto. Esto funciona para funciones normales, pero no de clase.
import React, {useContext} from "react"; import { createRoot } from "react-dom/client"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); class Service { getItems() { return [1, 2, 3]; } } const ServiceContext = React.createContext(); const App = () => { const service = useContext(ServiceContext) return <h1>{service.getItems()}</h1>; // service.getItems is not a function }; root.render( <ServiceContext.Provider value={Service}> <App /> </ServiceContext.Provider> );Este error no está relacionado con React o React Context, debe declarar un método como estático si desea llamarlo como: ClassName.method
class Service { static getItems() { return [1, 2, 3]; } } Service.getItems() //[1,2,3]O puede crear una instancia de su clase antes de pasarla al contexto:
root.render( <ServiceContext.Provider value={new Service()}> <App /> </ServiceContext.Provider> );Ahora puede acceder al método de instancia como lo intentaba sin que sea estático.