如何为 React App 中的组件实现工厂模式？答案

【问题标题】：How to implement Factory Pattern for components in a React App?如何为 React App 中的组件实现工厂模式？
【发布时间】：2019-01-30 14:16:26
【问题描述】：

我目前在我的公司使用 React 来构建我们的主要软件产品...该应用程序的开发始于一年前，我们没想到我们的应用程序发展得如此之快。现在我们正在处理一些问题，如果我们从一开始就进行了良好的架构设计，这些问题是可以避免的。

总而言之，我们遇到的最核心问题之一是代码重复......以及我们制作的每个新组件顶部的大量“导入”语句以及相关路由......

我想知道是否推荐使用工厂模式来解决此类问题以重用 React 组件以及如何成功实现它？

提前致谢

【问题讨论】：

我没有任何使用工厂模式 IMO 的方案。唯一类似的是 actionCreator，但那是针对 redux 的。归根结底，如果你正确地设计了你的组件，你可以设计一个导航栏或 foobar 或其他可重复使用的 props 或 children。顺便说一句，您应该显示重复代码，这样回答更有意义。
large amount of import 在实践中是什么意思？ 20-30还是正常的。 50-100 表示您必须将组件分块为更小的组件。我建议保持组件的单一职责，而不是使用工厂模式。
@gazdagergo 大约是 10 到 15 最大...
完全没问题。这就是 react 的工作原理，很多小组件，只负责一些特定的任务，父母使用它们的 10-15 个。我想说这不是问题。

【解决方案1】：

您可以通过这种方式实现工厂模式，

function ReactComponentFactory(contentsJSX){
  // do factory stuff here...
  return <div>{contentsJSX}</div>
}

但在我看来，这使得代码更难理解，所以我会避免使用工厂来处理组件。

【讨论】：