如何基于相同的逻辑和视图创建稍有不同的组件?

时间:2019-06-19 12:55:54

标签: reactjs react-redux

我有多种形式,其UI,架构和状态略有不同,但逻辑相同。我想知道在不重复代码的情况下创建表单的最佳方式是什么。由于几乎没有差异,因此我考虑使用通用功能创建中心位置,并在需要时对其进行扩展。 此外,呈现UI元素并相应地设置状态的功能在名为Form的类中,所有表单均从该类继承。

我试图创建基础工厂,然后使用它来创建特定工厂,但是必须实例化基础工厂以扩展其功能。

我试图创建类继承链,但是mapStateToProps和mapDispatchToProps出现问题。我还注意到,不建议这样做。

我考虑过HOC,但在这种情况下我认为它不太直观。

我正在使用React 16。

非常感谢!

1 个答案:

答案 0 :(得分:0)

@ranasulin,欢迎您加入!

您描述的情况对于composition over inheritance来说似乎是个好例子。 React + Redux支持无状态组件,函数式编程,并且并不总是与继承模式紧密结合(请参见the motivations behind Reduxsome good examples)。我建议您研究React + Redux环境的模式和反模式,然后再利用现有知识重新考虑您的设计。

祝你好运!