我有一个通用组件,它接受一个名为component的属性,而其余的属性应该是该特定组件的属性。我如何在typescript中做到这一点呢?即:
component
<FormField component={Input} ... />
此FormField应接受Input组件接受的任何属性。注意事项:
Input
3qpi33ja1#
我认为您可以使用generic
const FormField = <K,>(props: FormFieldProps & K) => { //Your component here }
用法:
<FormField<InputProps> .... />
elcex8rz2#
从@A.Vinuela的答案开始,我只是让它更容易使用,而不需要知道组件的道具接口,也使用了React内置的助手。我认为您可以使用generic和React.ComponentPropsWithoutRef<T>内置助手(或者React.ComponentPropsWithRef<T>,取决于您的需要)来实现这一点。
React.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属性的类型。所以我认为最好的解决方案是使用上面显示的通用。
T
2条答案
按热度按时间3qpi33ja1#
我认为您可以使用generic
用法:
elcex8rz2#
从@A.Vinuela的答案开始,我只是让它更容易使用,而不需要知道组件的道具接口,也使用了React内置的助手。
我认为您可以使用generic和
React.ComponentPropsWithoutRef<T>
内置助手(或者React.ComponentPropsWithRef<T>
,取决于您的需要)来实现这一点。用法:
不幸的是,不可能根据另一个属性的动态类型来确定一个属性的类型(* 至少我知道 *)。
你需要的是
但是,不能使用动态类型变量(如
T
)作为component
属性的类型。所以我认为最好的解决方案是使用上面显示的通用。