我正在尝试构建和键入仅将组件包装在ApolloProvider中的HOC。我希望能够将引用转发到包装的组件。但是,当我尝试在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>
包含一个泛型。
有人可以指出我正确的方向吗?
答案 0 :(得分:0)
最后,我找到了解决方案。
您所要做的就是提供道具的类型(在
[StaticReplacement(typeof(DateTime))] public static class DateTimeSubstitute { public static IDateTime Current { get; set; } public static DateTime Now { get { return Current.Now; } } }
中作为收到的类型,即React.forwardRef
。
P
完整代码:
return React.forwardRef((props:P, ref) => (
<WithProvider {...props} forwardedRef={ref} />
));