想要在react js中动态添加表行

Question

我想在react js中设计注册表单。但我想尽我所能优化代码。我以传统的方式取得了成功，即在表单中使用了大量的tr和td。我想通过使用javascript映射函数实现的是，希望每行包含三个标签，然后下一行应该开始。我想不通。你能帮我吗。下面是我的JSX代码。

{RegistrationData && RegistrationData.map((item,key)=>{
let row=false
if(key===0 || key===3)
row=true
else
row=false
return(
<>
{row && <tr>
<h1>{item.label}</h1>

</tr>}

</>
);

})
}

Answer 1

看起来你需要做一些相反的东西来压平数组，因此，我建议使用reduce方法，因为map将返回与初始数组长度完全相同的数组。首先，我将把最初的RegistrationData数组[1，2，4，5，6，7]转换为下面的[[1，2，3]，[4，5，6]，[7]]，然后我们可以使用map函数来创建行和单元格，希望它会有所帮助，见下面的示例

{RegistrationData &&
f.reduce((acc, cur) => {
if (acc.length && acc[acc.length - 1].length < 3) {
// lastRow = acc[acc.length - 1];
acc[acc.length - 1].push(cur);
} else {
acc.push([cur]); // add new row
}
return acc;
}, []).map((row) => {
return <tr>{row.map(item => (<td>item.label</td>))}</tr>;
})}

Answer 2

我所做的是定义一个JSON文件，在那里我定义了所有字段，然后用.map()迭代