ReactJS Context - withFirebase() pasar props?
Publicado por Victorio (11 intervenciones) el 27/04/2020 11:04:07
Buenas, estoy haciendo una web en ReactJS y Firebase, y el caso es que hay una cosa que me está dando varios mareos de cabeza y no consigo sacarlo.
Verán, estoy usando el patrón "Singleton" para instanciar una única vez Firebase, en el componente raíz. Tambien estoy dando uso de la API Context de React, para no tener que pasar la instancia por cada nivel del arbol. Es la primera vez que utilizo esta API, y mi problema está en que todos los componentes que necesitan dar uso de Firebase, estan suscritos al contexto del proveedor de Firebase... Y a la hora de intentar pasarle props adicionales, no me deja.
Les muestro un ejemplo en código:
---Proveedor de Firebase en: index.js
---Consumidor de Firebase:
--- Exportacion de SignUpForm:
--- Lo que estoy intentando hacer, y no puedo:
¿Alguna idea?
Verán, estoy usando el patrón "Singleton" para instanciar una única vez Firebase, en el componente raíz. Tambien estoy dando uso de la API Context de React, para no tener que pasar la instancia por cada nivel del arbol. Es la primera vez que utilizo esta API, y mi problema está en que todos los componentes que necesitan dar uso de Firebase, estan suscritos al contexto del proveedor de Firebase... Y a la hora de intentar pasarle props adicionales, no me deja.
Les muestro un ejemplo en código:
---Proveedor de Firebase en: index.js
1
2
3
4
5
6
ReactDOM.render(
<FirebaseContext.Provider value={new Firebase()}>
<App />
</FirebaseContext.Provider>,
document.getElementById("root")
);---Consumidor de Firebase:
1
2
3
4
5
6
7
8
9
10
11
import React from "react";const FirebaseContext = React.createContext(null);
export const withFirebase = (Component) => (props) => (
<FirebaseContext.Consumer>
{(firebase) => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);export default FirebaseContext;
--- Exportacion de SignUpForm:
1
export default withFirebase(SignUpForm);
--- Lo que estoy intentando hacer, y no puedo:
1
<SignUpForm setRelaod={setRelaod} />
¿Alguna idea?
Valora esta pregunta
0