为什么类型不能赋值给泛型类型

Question

我正在尝试构建和编写一个HOC，它只是在ApolloProvider中包装了一个组件。我希望能够将ref转发到包装的组件上。但是，当我尝试在forwardRef组件中传递props时，我遇到了类型错误。

在我的研究过程中，我偶然发现一个回答谈到了泛型可能是问题所在。

const withProvider = function<P>(WrappedComponent: React.ComponentClass<P>) {

  type Props = P & { forwardedRef?: React.Ref<any> }

  class WithProvider extends React.Component<Props> {
    render() {
      const { forwardedRef, ...props } = this.props
      return (
        <ApolloProvider client={client}>
          <WrappedComponent {...props} ref={forwardedRef} />
        </ApolloProvider>
      )
    }
  }

  hoistNonReactStatics(WithProvider, WrappedComponent)

  return React.forwardRef((props, ref) => (
    <WithProvider {...props} forwardedRef={ref} />
  ))
}

给我报错了：

Type '{ forwardedRef: string | ((instance: {} | null) => any) | RefObject<{}> | undefined; children?: ReactNode; }' is not assignable to type 'Readonly<Props>'

在我看来，这两者应该是匹配的，前者应该可以分配给后者。我能想到的唯一原因是 Readonly<Props> 包含一个泛型。

有人可以指点我方向吗？

- Donovan Hiland

Answer 1

最终，我找到了解决方案。

你需要在 React.forwardRef 中将 props 的类型（P）作为接收到的类型即可。

  return React.forwardRef((props:P, ref) => (
    <WithProvider {...props} forwardedRef={ref} />
  ));

完整代码：

const withProvider = function<P>(WrappedComponent: React.ComponentClass<P>) {

  type Props = P & { forwardedRef?: React.Ref<any> }

  class WithProvider extends React.Component<Props> {
    render() {
      const { forwardedRef, ...props } = this.props
      return (
        <ApolloProvider client={client}>
          <WrappedComponent {...props} ref={forwardedRef} />
        </ApolloProvider>
      )
    }
  }

  hoistNonReactStatics(WithProvider, WrappedComponent)

  return React.forwardRef((props:P, ref) => (
    <WithProvider {...props} forwardedRef={ref} />
  ))
}

- Siraj Alam