有没有什么方法可以创建一个使用 WrappedComponent 方法的 HOC？

Question

我想创建一个自动刷新的 HOC，看起来或多或少像这样：

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

    interval: NodeJS.Timeout;

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

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
      return (
        <WrappedComponent {...this.props} />
      );
    }
  };
}

我现在的问题是，我要刷新的功能仅在 WrappedComponent 内可用。有什么办法可以实现这个或类似于我所描述的东西吗？

Answer 1

这个其实很简单，我找到了方法
我只需要使用 refreshFunction 属性向该组件添加一个状态，并将 setter 函数作为 prop 传递给 WrappedComponent。草稿大致是这样的：

constructor(p: Readonly<any>) {
    super(p);
    this.state = {
        refreshFunction: () => void 0
    }
}

...

setRefresh(newFunction) {
    this.setState({
        ...this.state,
        refreshFunction: newFunction
    })
}

render() {
  return (
    <WrappedComponent {...this.props} setRefresh={this.setRefresh} />
  );
}

有没有什么方法可以创建一个使用 WrappedComponent 方法的 HOC？

Is there any way to create a HOC that uses methods from the WrappedComponent?

reactjs

higher-order-components