如何在 typescript 中使用 withRouter 和 forwardRef？答案

【问题标题】：How can I use withRouter with forwardRef in typescript?如何在 typescript 中使用 withRouter 和 forwardRef？
【发布时间】：2021-08-25 11:59:39
【问题描述】：

withRouter 不允许我将 ref 传递给组件，因此我正在尝试创建一个 HOC 来让我这样做。我尝试在 stackoverflow 上遵循一些答案，这就是我现在所拥有的 -

export const withRouterForwardRef = <ComposedComponentProps extends {}>(ComposedComponent: ComponentClass<ComposedComponentProps>) => {
    type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
    type  WrapperComponentProps = ComposedComponentProps & {
        forwardedRef:Ref<ComposedComponentInstance>;
    };
    const WithRouter = withRouter(({ forwardedRef,...props }) => (
      <Component ref={forwardedRef} {...props} />
    ));
        
    return forwardRef((props, ref) => (
       <WithRouter {...props} forwardedRef={ref} />
    ));
  };

但是这里 withRouter 中的 forwardedRef 会抛出一个错误，说 -“类型 'RouteComponentProps & { children?: ReactNode; }' 上不存在属性 'forwardedRef'。 ”

现在几乎卡在这里了。有没有更好的方法通过withRouter传递ref？

【问题讨论】：

标签： reactjs typescript react-router ref

【解决方案1】：

我相信您可以使用wrappedComponentRef 属性将 ref 传递给底层组件：

export const withRouterForwardRef = <ComposedComponentProps extends {}>(ComposedComponent: ComponentClass<ComposedComponentProps>) => {
    type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
    type  WrapperComponentProps = ComposedComponentProps & {
        forwardedRef:Ref<ComposedComponentInstance>;
    };
    const WithRouter = withRouter(Component);
        
    return forwardRef((props, ref) => (
       <WithRouter {...props} wrappedComponentRef={ref} />
    ));
  };

【讨论】：