< Question:
I m 从事以下工作:13项使用原型,Im 试图采用反应照相方式创建通用成分。 目标是有一个单一形式的组成部分,能够处理不同类型的形式,如报告、客户和用户。 每一种形式都有自己的一套领域,但形式业务(休假、重新设置、更新和删除)在所有类型上都保持相同。
这里,我试图做到的简略版本是:
import { FC } from react ;
import { useForm, SubmitHandler } from react-hook-form ;
// Define different types of form data
type ReportFormData = {
reportField: string;
};
type ClientFormData = {
clientField: string;
};
type UserFormData = {
userField: string;
};
// Define props for the generic form component
type FormProps<T> = {
initialData: T;
onSubmit: SubmitHandler<T>;
};
// Create the generic form component
const GenericForm: FC<FormProps> = ({ initialData, onSubmit }) => {
const { register, handleSubmit, reset } = useForm({
defaultValues: initialData,
});
const onSubmitHandler: SubmitHandler<T> = (data) => {
onSubmit(data);
};
return (
<form onSubmit={handleSubmit(onSubmitHandler)}>
{/* How can I conditionally render fields based on the type of data? */}
{/* How to properly handle type checking in this scenario? */}
{/* Placeholder for save operation */}
<button type="submit">Save</button>
{/* Placeholder for reset operation */}
<button type="button" onClick={() => reset(initialData)}>
Reset
</button>
{/* Placeholder for update operation */}
{/* Placeholder for delete operation */}
</form>
);
};问题:
Im 面临一个在通用语种内进行原型检查的问题。 由于反应照像要求准确打造形式领域,我只能使用一种联盟类型来收集我的形式数据。 然而,我需要通用表格部分根据所提供的表格接受不同类型的初步数据。
I m 无法保证如何在通用名称部分内妥善处理类型检查和有条件提供,以顾及不同类型的形式数据,同时保持类型安全。
Expected Output:
我期望有一个单一的通用部分,能够处理不同类型的形式,从而根据所提供的初步数据类型,使适当的领域成为可能。 此外,我需要确保在构成部分内适当处理原型检查。