如何在 React App 中为组件实现工厂模式？

Question

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

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

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

提前致谢

Answer 1

你可以用这种方式实现工厂模式，

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

但在我看来，这会使代码更难理解，因此我会避免将工厂用于 React 组件。