我正在尝试构建通用的高阶函数asFormField，该函数将使用更多表单字段元素包装给定的表单组件，例如标签，错误消息，工具提示等。但是我在正确设置类型方面遇到问题，因为我希望asFormField能够根据所包装的组件处理正确的prop类型。旁注，我需要保留forwardRef的{{1}}功能
例如Select.tsx
react-hook-form和import React, {forwardRef, HTMLProps} from 'react';
interface IOption {
label: string;
value: string;
}
export interface ISelectProps {
options: IOption[];
}
type T = HTMLSelectElement;
type Props = HTMLProps<T> & ISelectProps;
const Select = forwardRef<T, Props>((props, ref) => {
return (
<select
{...props}
ref={ref}
>
{props.options.map((option) => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>)
});
export default Select;
HOC-
asFormField我希望能够摆脱import React, { forwardRef, HTMLProps } from 'react';
import { ISelectProps } from '../form/Select';
interface FormFieldProps {
label?: string;
name?: string;
type?: string;
forwardedRef?: any;
}
type T = any;
type Props = HTMLProps<T> | ISelectProps;
const asFormField = (Component) => {
const FormField = ({label, forwardedRef, ...rest}: FormFieldProps) => {
return (
<div>
{label && <label htmlFor={rest.name}>{label}</label>}
<Component ref={forwardedRef} {...rest}/>
</div>
)};
return forwardRef<T, Props>((props, ref) => (<FormField {...props} forwardedRef={ref} />));
}
export default asFormField;
类型中的ISelectProps，并使其能够基于HOC中包装的组件来理解要使用哪种类型。 >
感谢您的帮助。