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

【问题标题】：React - reuse patterns for almost similar componentsReact - 几乎相似组件的重用模式
【发布时间】：2020-01-13 06:11:36
【问题描述】：

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

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

我可以通过

做出反应

我对反应很陌生，所以无法决定哪一种是正确的反应方式或这样做的模式。请帮助。

【问题讨论】：

您已经放弃了选项 3。构建一个接受字段列表及其验证的组件，并传递它 [a, b, & c], [b, c, & d],或 [a, c, & d] 视情况而定。所有三个选项都有其位置。您使用哪三个取决于您的具体情况和代码库。
除了下面我的回答，我觉得这是另一个很好的做法
我的建议是列出更小的组件，例如 a,b,c,d，并创建组合各种组件组合的 HOC

【解决方案1】：

在 React 中，只有少数场景只有一种正确的渲染方式。这主要是基于意见的。我个人会选择选项 1，并调整组件以便它们在页面上正确显示。但谁知道呢，也许你碰上了一面砖墙，不得不接受选项 2。除非你尝试，否则你永远不会知道。总结一下：做任何你觉得更自然的事情，尽量不要重复你的代码。

【讨论】：

【解决方案2】：

在我看来，最好有一个愚蠢的组件列表和一个将它们组合在一起并指导流程的 HOC。

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

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

您有以下页面/用例：

你去的任何一个页面，你都需要用户登录，所以登录表单很常见。但是，第 3 点和第 4 点并不那么重要。因此，只需客户 ID 和密码即可。

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

【讨论】：