javascript - React - 几乎相似组件的重用模式

Question

我有一个 react 站点，其中包含许多几乎相似的页面(向用户显示表单)。例如，

1. 页面 x 包含一个带有字段 a、b 和 c 的表单。
2. 第 y 页包含一个带有字段 b、c 和 d 的表单。
3. 页面 z 包含一个带有字段 a、c 和 d 的表单。

这些页面(和表单)也可能有细微的 CSS 差异(取决于字段的数量等)。所有这些表格都有客户验证。

我可以在 React 中开发它

1. 创建一个包含字段 a、b、c 和 d 的组件，并且仅根据页面类型有条件地呈现字段、验证逻辑等。
2. 为每个页面创建单独的组件。

我对 react 还很陌生，所以无法决定哪一种是正确的 react 方式或模式。请帮助。

Answer 1

在我看来，拥有一个dumb组件列表和一个将它们组合在一起并引导流程的 HOC 总是更好。

您可以拥有一个包含大量条件分支的庞大组件。但这将是复杂的理解和维护。分离可以让您更好地控制逻辑，还可以减少依赖性/交叉影响。

---

您有一个基于金融的产品，例如银行应用程序。

您有以下页面/用例:

1. 在线交易。
2. 查看余额/报表
3. KYC 表格更新
4. 私有(private)银行家通讯。

无论你去哪个页面，你都需要用户登录，所以登录表单很常见。但是，第 3 点和第 4 点并不那么重要。所以只需客户 ID 和密码就足够了。

对于第 1 点和第 2 点，需要采用更安全的方法。所以你可以添加电话/电子邮件验证。所以基本上您可以拥有相同的登录页面，但让 HOC 决定流程。