typescript - 使用 redux-form 的动态表单名称

我有一个使用 redux-form 创建的表单组件。

我正在使用 reduxForm() 高阶组件将表单组件连接到 redux-form 的 redux 存储。

作为其中的一部分，我必须为表单提供一个名称，该名称充当 ID，redux-form 会在其下存储表单数据。

export const ContactAddEditForm = ReduxForm.reduxForm<FormData, Props>({
    form: "contactAddEdit"
})(ContactAddEdit);

在上面的例子中，我使用了名称“contactAddEdit”。

我想在多个地方重复使用这个表单，它们共享相同的数据结构，但由不同的数据源支持。

因此，这意味着同一表单的多个版本可能会同时出现在页面上，因此需要不同的名称以便它们在存储中保持分开。

由于该要求，我需要能够动态地更改用于在存储中识别表单的名称。

例如

一个实例可能被称为“personalContactAddEdit”，另一个可能被称为“businessContactAddEdit”。

或者“contactOneAddEdit”、“contactTwoAddEdit”和“contactThreeAddEdit”。

等等

我正在使用用 TypeScript 编写的模块，并使用 ES 模块语法进行导出和导入。这些模块都通过 WebPack 打包在一起。

我一直在思考如何解决这个问题，我有一些想法：

每次都创建该类的一个新的专用版本。

这可能是最简单的，但也是最不理想的选项。我会把我现在的模块代码拿来，把它封装在一个以名称作为参数的函数中，然后使用传入的名称返回结果。这个问题是每次调用都必须运行模块的完整代码。

在模块中使用没有 HOC 的裸组件。

然后为每个唯一名称创建一个新模块，导入组件并从高阶组件返回结果。

例如

个人联系人添加编辑

import * as ContactAddEdit from "./ContactAddEdit";

export const PersonalContactAddEditForm = ReduxForm.reduxForm<ContactAddEdit.FormData, ContactAddEdit.Props>({
    form: "personalContactAddEdit"
})(ContactAddEdit.ContactAddEdit);

商业联系人添加编辑

import * as ContactAddEdit from "./ContactAddEdit";

export const BusinessContactAddEditForm = ReduxForm.reduxForm<ContactAddEdit.FormData, ContactAddEdit.Props>({
    form: "businessContactAddEdit"
})(ContactAddEdit.ContactAddEdit);

创建一个工厂，根据名称要么返回现有的专用版本，要么在不存在时创建一个新的。

这是第一种选择的灵活性，结合了第二种选择的整洁性。

我不确定在这种环境中实现这个模式的最佳方法。

• 对于这个需求，有标准/推荐的做法吗？
• 相比上述列出的选项，我是否错过了更好的选择？
• 如果工厂是最好的选择，实施它的最佳方式是什么？

由于它与模块的概念紧密相关，感觉像是 WebPack 可能支持的东西，但我还没有找到任何相关的迹象。

如果我遗漏了任何重要信息，请告诉我，我会更新问题。