gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 16:19:08 24 4
gpt4 key购买 nike

我想在 react js 中设计注册表单。但我想尽可能地优化代码。我以传统方式取得了成功,即在表格中使用大量 tr 和 td。我想通过使用 javascript map 函数来实现,并希望每行包含三个标签,然后下一行应该开始。我无法弄清楚。你能帮帮我吗?下面是我的 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 函数来创建行和单元格,希望它会有所帮助,见下面的例子

  {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>;
})}

关于javascript - 想要在 react js中动态添加表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67201614/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com