為什么類型不能分配給泛型類型

Question

我正在嘗試構建並鍵入一個HOC，它只是在ApolloProvider中包裝一個組件。 我希望能夠將引用轉發到包裝組件。 但是，當我嘗試在forwardRef組件中傳遞道具時，我遇到了類型錯誤

在我研究狂歡的某個地方，我偶然發現了一個回答談​​到仿制葯問題的答案。

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>包含一個泛型。

有人能指出我正確的方向嗎？

Answer 1

最后，我找到了解決方案。

你所要做的就是給出類型的道具（在React.forwardRef ）作為收到的類型，即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} />
  ))
}