如何在React App中为组件实现Factory Pattern？

Question

我目前正在我公司中使用React来构建我们的主要软件产品...该应用程序的开发是在一年前开始的，我们并不期望我们的应用程序会像现在这样增长。现在，我们正在处理某种问题，如果从一开始就进行良好的体系结构设计，就可以避免这些问题。

总而言之，我们遇到的最主要的问题之一是代码重复...以及在我们制作的每个新组件顶部都有大量带有相对路径的“ import”语句...

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

预先感谢

Answer 1

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

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

但是我认为这会使代码更难理解，因此我避免使用工厂来编写React组件。