如何在 ReactJS 中消除多个容器组件以实现代码可重用性

Question

我遵循Dan Abramov的容器和表示组件模式来制作一组地址形式。地址表单有 3 个不同版本。它们因布局和上面的控件而异。提交表单时，后端 API 中会运行不同的业务逻辑，以向表单返回一些验证消息。

Form A:
First Name
Last Name
Address
City
State
Zip
Form B:
First Name
Last Name
Address
Zip
Form C:
Full Name
Zip

目前，我使用三个容器来管理这三个表单，并且在容器中重复了一些逻辑。我预计未来会有更多这样的形式。

我如何解决这个问题，其中代码可以重用于许多表单，并且表单易于管理和理解？

Answer 1

由于任何 React 组件都只是 JavaScript 代码，您可以将共享代码提取到一些实用程序函数/类中并在表单组件中使用它们。