在React组件中继承

Question

请考虑以下情况：

我创建了一个“ baseUser”组件，该组件是具有三个字段的用户名，密码和名称的表单。现在，我希望在三个不同的应用程序中使用此表单：Application1，Application2和Application3。

1. 在Application1中，用户组件应使用此baseUser组件，但只需要baseUser状态的两个字段（用户名，密码），并且还应具有两个其他字段，分别是名字和姓氏。
2. 在Application2和Application3中，用户组件应与baseUser相同。
3. 所有动作，事件，状态也应该能够单独工作并能够被覆盖。

render方法也应该被覆盖，因为它们对于不同的应用程序可以是不同的UI。

如何使用react组件实现此功能？在应用程序中使用“扩展”继承“ baseUser”是否会引起任何问题（或者这是正确的方法）？

Answer 1

反应不使用Inheritance。您不能扩展react组件。 React基本上在Composition上工作。合成是指创建小零件并将它们组合在一起以构成一个完整的零件。

现在，根据您的情况。 baseUsr组件中只有3个输入字段，而您只想在application1中使用其中两个输入字段。简直你做不到。您必须呈现完整的baseUsr组件。

您弄错了组件的概念。考虑一些组件，例如抽象的或可以独立使用的功能或UI的一部分。 例如，您可以创建一个Header组件，因为它可以单独使用并且可以在多个页面上使用。但是不能单独使用input中的form字段。

之所以会造成这种混乱，是因为您像在javascript中创建类一样创建组件，但是它们是UI的基本构建块。 有关更多信息，请阅读Composition VS inheritance on React docs