在 React 中存储默认表单值和接口的最佳实践 TypeScript

Question

我有一个具有巨大而复杂形式的组件。 所以在一个组件中我有超过 10 个接口和很多默认表单值，如下所示：

const {
        control,
        handleSubmit,
        resetField,
        formState: { errors }
    } = useForm<FormValues>({
        defaultValues: {
            site: {
                name: '',
                description: '',
                minTemperature: '',
                maxTemperature: '',
                windSpeed: '',
                seismicity: '',
                explosiveness: '',
// and lot of default values below (more than 30 rows)

我认为我应该在其他一些文件（也许是其他目录）中存储接口和具有 Form 默认值的常量。 存储它的最佳做法是什么？

将接口存储在名为“FormInterfaces.ts”的文件中名为“interfaces”的目录中是一种好方法吗？ 您通常在哪里存储默认表单值？

Answer 1

我通常将接口，有时甚至是类型存储在它们自己的文件中。

常量应该在它们自己的文件中定义，然后从那里导入。

您从中获得的一个免费好处是循环引用不太可能发生。

FormInterfaces.ts很可能不是一个好名字。 该名称应该反映它构建的业务逻辑，而不是它的使用方式。