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

Question

我想在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>}
                                        

                                        </>
                                );
                                
                            })

                            }

Answer 1

看起来你需要做一些相反的事情来压平数组，所以为此，我建议使用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>;
    })}