英文:
Using forwardRef with HOC in typescript
问题
你想要的中文翻译是：
"我正在尝试创建一个React高阶组件（HOC），但遇到了问题，以下是我的代码：
import React, { FC, forwardRef } from 'react'
import { ButtonBase, ButtonBaseProps } from '@mui/material'
export default function withTouchRipple<PROPS>(OriginalComponent: FC<PROPS>) {
return forwardRef((props: any, ref) => <ButtonBase {...props} ref={ref} component={OriginalComponent} />)
}
- 我在使用MUI。
它运行良好。然而，我想从props: any中移除any类型，应该是PROPS，这样给定组件OriginalComponent的props接口将在外部可见。
但是，当我这样做时，TypeScript会报错。"
请注意，我只翻译了你的代码和问题陈述，没有包括错误信息。
英文:
I am trying to make a react HOC, but I am having problems, here's my code:
import React, { type FC, forwardRef } from 'react'
import { ButtonBase, ButtonBaseProps } from '@mui/material'
export default function withTouchRipple<PROPS>(OriginalComponent: FC<PROPS>) {
return forwardRef((props: any, ref) => <ButtonBase {...props} ref={ref} component={OriginalComponent} />)
}
- I am using MUI.
It works well. However, I want to remove the any type from props: any, it should be PROPS, so the interface of the props of the given component OriginalComponent will be visibie from outside.
but when I do so, typescript complains:
Here's the code after the change and here's the compile error:
import React, { type FC, forwardRef } from 'react'
import { ButtonBase, ButtonBaseProps } from '@mui/material'
export default function withTouchRipple<PROPS>(OriginalComponent: FC<PROPS>) {
return forwardRef((props: PROPS, ref) => <ButtonBase {...props} ref={ref} component={OriginalComponent} />)
}
No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & { action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; children?: ReactNode; classes?: Partial<ButtonBaseClasses> | undefined; ... 10 more ...; touchRippleRef?: Ref<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
Type 'ForwardedRef<unknown>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
Types of property 'current' are incompatible.
Type 'unknown' is not assignable to type 'HTMLAnchorElement | null'.
Overload 2 of 3, '(props: { component: FC<PROPS>; } & { action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; children?: ReactNode; ... 11 more ...; touchRippleRef?: Ref<...> | undefined; } & Omit<...> & CommonProps & DistributiveOmit<...>): Element | null', gave the following error.
Type 'PROPS & { ref: ForwardedRef<unknown>; component: FC<PROPS>; }' is not assignable to type 'IntrinsicAttributes & { component: FC<PROPS>; } & { action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; ... 12 more ...; touchRippleRef?: Ref<...> | undefined; } & Omit<...> & CommonProps & DistributiveOmit<...>'.
Type 'PROPS & { ref: ForwardedRef<unknown>; component: FC<PROPS>; }' is not assignable to type 'DistributiveOmit<PropsWithRef<PROPS>, keyof CommonProps | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | ... 6 more ... | "touchRippleRef">'.
Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonBaseTypeMap<{}, "button">>>): Element | null', gave the following error.
Type 'ForwardedRef<unknown>' is not assignable to type '((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type '((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<HTMLButtonElement>'.
Types of property 'current' are incompatible.
Type 'unknown' is not assignable to type 'HTMLButtonElement | null'.ts(2769)
index.d.ts(805, 46): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & { href: string; } & { action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; children?: ReactNode; ... 11 more ...; touchRippleRef?: Ref<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'
index.d.ts(805, 46): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & { action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; children?: ReactNode; ... 11 more ...; touchRippleRef?: Ref<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'
答案1
得分: 0
React.forwardRef 是一个通用函数，您可以按如下方式传递您的通用类型：
import { type FC, forwardRef } from "react";
import { ButtonBase } from "@mui/material";
export default function withTouchRipple<PROPS>(
OriginalComponent: FC<PROPS>,
displayName: string
) {
const component = forwardRef<HTMLButtonElement, PROPS>((props, ref) => (
<ButtonBase {...props} ref={ref} component={OriginalComponent} />
));
component.displayName = displayName;
return component;
}
英文:
React.forwardRef is a generic function and you can pass your generic type as follows:
import { type FC, forwardRef } from "react";
import { ButtonBase } from "@mui/material";
export default function withTouchRipple<PROPS>(
OriginalComponent: FC<PROPS>,
displayName: string
) {
const component = forwardRef<HTMLButtonElement, PROPS>((props, ref) => (
<ButtonBase {...props} ref={ref} component={OriginalComponent} />
));
component.displayName = displayName;
return component;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论