作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试构建并键入一个 HOC,它只是将组件包装在 ApolloProvider 中。我希望能够将引用转发给包装的组件。但是,当我尝试在 forwardRef 组件中传递 Prop 时,我遇到了类型错误
在我疯狂研究的某个时候,我偶然发现了一个答案,它谈到泛型是问题所在。
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>
包含一个泛型。
有人能指出我正确的方向吗?
最佳答案
最后,我找到了解决方案。
All you have to do is give the type of props (in
React.forwardRef
) as the type received which isP
.
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} />
))
}
关于reactjs - 为什么类型不能分配给泛型类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54451253/
我是一名优秀的程序员,十分优秀!