Почему тип не присваивается универсальному типу - PullRequest
Новая
       8

Почему тип не присваивается универсальному типу

0 голосов
/ 31 января 2019

Я пытаюсь построить и напечатать 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> содержит общее.

Может ли кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 01 июля 2019

Наконец-то я нашел решение.

Все, что вам нужно сделать, это указать тип реквизита (в 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} />
  ))
}
...