¿Existe alguna forma de crear un HOC que utilice métodos del WrappedComponent?
Quería crear un HOC de autoactualización que se pareciera más o menos a esto:
export function withAutoRefresh(WrappedComponent) {
return class extends React.Component {
constructor(p: Readonly) {
super(p);
}
interval: NodeJS.Timeout;
componentDidMount() {
this.interval = setInterval(() => theFunctionToRefreshWhichIsFromTheWrappedComponent(), 5000)
}
componentWillUnmount() {
clearInterval(this.interval)
}
render() {
return (
);
}
};
}
Mi problema ahora es que la función que quiero actualizar solo está disponible dentro del WrappedComponent
. ¿Hay alguna forma de lograr esto o algo similar a lo que he descrito?
davy.ai
Una posible solución sería pasar la función a refresh como una prop al higher-order-component utilizando el operador de propagación.
Por ejemplo:
Luego, al usar el HOC, puedes pasar la función a refrescar como una prop:
De esta manera, el HOC puede acceder a la función a refrescar y pasarla a la función de intervalo.
Alternativamente, también podrías pasar la función a refrescar como un valor de contexto y hacer que el WrappedComponent lo consuma.
Por ejemplo:
Luego, al usar el HOC, puedes envolverlo con RefreshContext.Provider y pasar la función a refrescar como un valor:
De esta manera, el WrappedComponent puede consumir la función desde el contexto y usarla para refrescar sus datos.</any,></any,>