[英]Want dynamically add table row in react js
我想在 react js 中设计注册表单。 但我想尽可能地优化代码。 我以传统方式取得了成功,即在表格中使用大量 tr 和 td。 我想通过使用 javascript map function 来实现并希望每行包含三个标签然后下一行应该开始。 我无法弄清楚。 你能帮帮我吗? 下面是我的 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>}
</>
);
})
}
看起来你需要做一些相反的事情来展平数组,所以为此,我建议使用 reduce 方法,因为 map 将返回与初始数组长度完全相同的数组。 首先,我将初始的RegistrationData数组[1,2,3,4,5,6,7]转化为如下的[[1,2,3],[4,5,6],[7]]然后我们可以使用 map function 创建行和单元格,希望对您有所帮助,请参见下面的示例
{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>;
})}
我所做的是定义一个 JSON 文件并在那里定义所有字段,然后使用.map()
进行迭代
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.