Reactjs 必须使用forwardRef Typescript定义应用两次接口

如果我不应用下面的

WidgetArgs

，我会得到错误：

~         [tsserver 2345] [E] Argument of type '({ field, value, onChange,                
~         disabled, ...rest }: { [x: string]: any; field: any; value?: any;               
~         onChange?: () => void; disabled: any; }, ref: Ref<HTMLSpanElement>) =>          
~         Element' is not assignable to parameter of type                                 
~         'ForwardRefRenderFunction<HTMLElement, WidgetArgs>'.                            
~           Types of parameters '__0' and 'props' are incompatible.                       
~             Type 'PropsWithChildren<WidgetArgs>' is not assignable to type '{ [x:       
~         string]: any; field: any; value?: any; onChange?: () => void; disabled: 

forwardRef函数的定义：

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

函数forwardRef（呈现：ForwardRefRenderFunction）：ForwardRefExoticComponent；

您正在创建

ForwardRefRenderFunction

并在两个单独的步骤中调用

forwardRef

。这意味着渲染函数

AddressZip

不知道最终调用

forwardRef

时将使用什么

T

和

P

你的推论倒过来了。如果要定义渲染函数，然后调用

forwardRef

，则渲染函数需要知道

T

和

P

类型

forwardRef（AddressZip）

可以根据

AddressZip

的类型推断

T

和

P

您需要在道具上保留

WidgetAreas

类型，但不需要在

forwardRef

上使用它。你可以写：

export default forwardRef(AddressZip);

此导出具有以下类型：

React.ForwardRefExoticComponent<Pick<WidgetArgs, string | number> & React.RefAttributes<HTMLSpanElement>>

---

哦是否因为我使用的是函数指针而不是内联指针，所以希望将类型分配给forwardRef存在问题？如果是内联操作，则可以将类型分配给

forwardRef

，而不是props。如果使用在

forwardRef

之外定义的单独函数指针执行此操作，则必须为道具分配类型，因为它不知道

forwardRef

类型。小提示：使用Number.isNaN而不是

isNaN

React.ForwardRefExoticComponent<Pick<WidgetArgs, string | number> & React.RefAttributes<HTMLSpanElement>>

export default forwardRef<HTMLSpanElement, WidgetArgs>((
    {
        field,
        value = null,
        onChange = () => { },
        disabled,
        ...rest
    },
    ref
) => {
...