想要在反應js中動態添加表格行

Question

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

                                        </>
                                );
                                
                            })

                            }

Answer 1

看起來你需要做一些相反的事情來展平數組，所以為此，我建議使用 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>;
    })}

Answer 2

我所做的是定義一個 JSON 文件並在那里定義所有字段，然后使用.map()進行迭代