typescript 基于其他道具类型的道具类型

hzbexzde  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(106)

我有一个通用组件,它接受一个名为component的属性,而其余的属性应该是该特定组件的属性。我如何在typescript中做到这一点呢?
即:

<FormField component={Input} ... />

此FormField应接受Input组件接受的任何属性。
注意事项:

  • 我想从props推断类型。不想传递额外的类型
3qpi33ja

3qpi33ja1#

我认为您可以使用generic

const FormField = <K,>(props: FormFieldProps & K) => {
    //Your component here
}

用法:

<FormField<InputProps> .... />
elcex8rz

elcex8rz2#

从@A.Vinuela的答案开始,我只是让它更容易使用,而不需要知道组件的道具接口,也使用了React内置的助手。
我认为您可以使用genericReact.ComponentPropsWithoutRef<T>内置助手(或者React.ComponentPropsWithRef<T>,取决于您的需要)来实现这一点。

const FormField = <K>(props: FormFieldProps & React.ComponentPropsWithoutRef<K>) => {
    //Your component here
}

用法:

<FormField<typeof AnyComponent> .... />

不幸的是,不可能根据另一个属性的动态类型来确定一个属性的类型(* 至少我知道 *)。
你需要的是

// UNFORTUNATELY THIS IS NOT VALID
interface FormFieldProps {
component: T,
props: React.ComponentPropsWithoutRef<T>
}

但是,不能使用动态类型变量(如T)作为component属性的类型。
所以我认为最好的解决方案是使用上面显示的通用。

相关问题