es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Existe alguna forma de crear un HOC que utilice métodos del WrappedComponent?

17 Jul, 2023 Programación

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?

Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    export function withAutoRefresh(WrappedComponent, refreshFunction) {
  return class extends React.Component<any, any=""> {
    constructor(p: Readonly<any>) {
      super(p);
    }

    interval: NodeJS.Timeout;

    componentDidMount() {
        this.interval = setInterval(() => refreshFunction(), 5000)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
      return (
        <wrappedcomponent {...this.props}=""></wrappedcomponent>
      );
    }
  };
}

    Luego, al usar el HOC, puedes pasar la función a refrescar como una prop:

    const MyComponent = withAutoRefresh(WrappedComponent, laFuncionParaRefrescarQueVieneDelWrappedComponent)

    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:

    const RefreshContext = React.createContext(() => {})

export function withAutoRefresh(WrappedComponent) {
  return class extends React.Component<any, any=""> {
    constructor(p: Readonly<any>) {
      super(p);
    }

    interval: NodeJS.Timeout;

    static contextType = RefreshContext;

    componentDidMount() {
        this.interval = setInterval(() => this.context(), 5000)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
      return (
        <wrappedcomponent {...this.props}=""></wrappedcomponent>
      );
    }
  };
}

    Luego, al usar el HOC, puedes envolverlo con RefreshContext.Provider y pasar la función a refrescar como un valor:

    <refreshcontext.provider value="{laFuncionParaRefrescarQueVieneDelWrappedComponent}">
  <mycomponent></mycomponent>
</refreshcontext.provider>

    De esta manera, el WrappedComponent puede consumir la función desde el contexto y usarla para refrescar sus datos.</any,></any,>

Comments are closed.