Javascript 如何在React中设计一个复杂的表单

我需要在React中创建一个由多个组件组成的表单，例如

，

，其中每个组件都有不同的道具，其中一些道具很常见，例如

Id，Label

问题是我应该如何编程，我有一些想法->

将其拆分为单独的数组会更容易：

下拉列表、文本字段、日期选择器

，然后通过

.map（）

进行渲染，但由于它们在表单中不按顺序排列，因此无法工作

将所有组件放入数组中，并使用if/switch/function通过

.map（）

渲染它们，在这里我将决定哪个组件是哪个组件

但是，我如何传递道具，例如

onChange

等

• 我还应该如何使用钩子存储所有这些输入？字符串数组，还是某个对象

---

始终将组件建立在抽象的基础上，并尝试使其可重用，因此假设我想创建一个登录表单

我将创建一个名为common的文件夹，其中包含常用组件，如文本字段和下拉列表，作为重用它们的一种方式

然后是另一个用于包装大多数功能的组件：处理提交事件、处理表单验证、呈现输入、呈现下拉列表。这些功能中的大多数都是我表单的核心，因此将它们抽象为一个单独的组件，称为表单组件

最后，我创建了另一个名为loginForm的组件，在其中我调用这些功能来呈现它们

---

我将空字符串类型的初始字段值存储在loginform中的状态钩子中，并将其作为参数传递给表单组件的props。

为什么不使用像Formik或react final-form这样的东西呢。。可用。我不需要它的库，我只需要一个建议如何在一个“好”的方式编程：）这是建议。以上所有软件包都需要您使用自己的组件，它们只是帮助您进行简单的状态管理和验证等。您仍然会使用您的文本文件等，只是让软件包处理的状态管理好的，我来看看。谢谢

 const App = (props) => {
  const forms = props.forms
  const getItem(type) {
    if (type === Type.DropDown) {
      return <Dropdown dropDownProps>
    }
    ....
  }
  return (
    forms.map(item => {
      return getItem(item.type)
    })
  )
}

const FirstField = {id: 0, label: "FirstField"}
...