ReactJS:希望改进我的动态字段构建组件

Question

我对React功能组件相对陌生，我正在尝试构建一个从对象数组中构建表单的系统。到目前为止，它是有效的，但我觉得我错过了什么。这是代码：

import React, { useState } from 'react';
import "./DynamicForm.css";
function DynamicForm(props) {
const [formFields, setFormFields] = useState([
{ name: "first_name", type: "text", value: "" },
{ name: "last_name", type: "text", value: "" },
{ name: "phone", type: "tel", value: "" },
{ name: "email", type: "email", value: "" },
{ name: "date_of_birth", type: "date", value: "" },
{ name: "language", type: "select", options: ['en', 'es'], value: "" },
])
const handleChange = (index, value) => {
let newFormFields = [...formFields];
newFormFields[index].value = value;
setFormFields(newFormFields);
}
const builtForm = (
<div>
{formFields.map((field, index) => {
return (
<div class="col-md-3" index={index}>
<div class="form-group">
<label class="control-label">{field.name}</label>
<input placeholder="" type={field.type} class="form-control" value={field.value} onChange={(e) => handleChange(index, e.target.value)} />
</div>
</div>
)
})}
</div>
)
return (
<div>
<section>
{builtForm}
</section>
</div>);
}
export default DynamicForm;

注意：为了提高可读性，我将代码剪切到了核心部分。

是不是有点太简单了？每次我在其中一个生成的输入中输入新字符时，整个表单及其所有字段都会重新呈现，对吗？我应该使用其他挂钩还是设计其他挂钩？

Answer 1

我不太确定在不更新整个组件的情况下动态创建组件，但这里有一些想法。

首先，在JSX中，class应该是className。class已经是JavaScript中的一个关键字，所以我们使用className，我相信这就是它在虚拟dom中的名称，也就是你在那里实际编辑/创建的内容。

其次，为循环创建的组件提供关键道具。这有助于所谓的和解。帮助react识别哪些组件实际上需要更新。在您的情况下，您的字段都有一个唯一的name属性，因此您可以将映射中的div更改为：

return (
<div key={field.name} className='col-md-3' index={index}>
...
</div>
);

千万不要将循环的索引用于键。

接下来，对于这种方法，为了避免重新发送所有内部组件，我希望使用useMemo钩子来缓存元素。问题是，您将在循环中创建组件，这与"；钩子规则"；。

最后，我的方法是为每个字段创建一个单独的组件，而不是通过循环来创建它们。然而，我很想听听一些更有经验的人如何做到这一点，以实现动态方法。