reactjs - 为什么类型不能分配给泛型类型
问题描述
我正在尝试构建和键入一个 HOC,它只是将一个组件包装在 ApolloProvider 中。我希望能够将 ref 转发到包装的组件。但是,当我尝试在 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>
包含一个泛型。
有人可以指出我正确的方向吗?
解决方案
最后,我找到了解决方案。
您所要做的就是将 props (in
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} />
))
}
推荐阅读
- keras - 如何通过使用像素作为输入来更新游戏状态?
- ios - 如何通过界面生成器在属性字符串中使用动态颜色?
- python - 带边界的 ScatterLayout
- c# - 如何使玩家相对于相机移动?
- android - 什么是 Widget.AppCompat.Light.ActionBar.Solid.Inverse?
- javascript - 如何使用javascript将具有给定类的每个元素的字体缩放到其父尺寸?
- sql - 在 birt 报告中显示数据
- java - 有没有办法使用java在android中将docx转换为pdf?
- python - 如何从包含另一个列表中的关键字的嵌套列表中找到所有列表
- react-native - 反应原生选择器数据集更改时如何修复崩溃