reactJS - JSX map 數組形成元素，但每四個元素分組

Question

我想創建一個包含大約 30 個元素的表單，其語義 UI 如下所示：

     <Form.Input
        id="survive"
        type="number"
        label="survive"
        required
      />

所以我想創建一個包含所有Form.Input id 和map的數組，如下所示：

return (
        myArray.map((element) => {
           <Form.Input id={element} label={element} type="number"/>
        })

如何將每四個元素與 array.map() function 組合在一起？ 手動它會像這樣工作，但我相信有一種更有效的方法，就像手動這樣

<Form.Group>
    <Form.Input id="1"/>
    <Form.Input id="2"/>
    <Form.Input id="3"/>
    <Form.Input id="4"/>
</Form.Group>

Answer 1

您不能僅使用.map(..)來做到這一點，因為.map(..)返回一個與原始數組具有相同數量元素的數組，並且預期結果是一個具有myArray.length / 4個元素的數組.

為此，您可以結合使用.reduce(..)和.map(..) ，這是一個示例：

myArray.reduce((a, c, i) => {
  if (i % 4 === 0) {
    a.push([]);
  }
  a[a.length - 1].push(c);
  return a;
}, []).map((arr) => (
  <Form.Group>
    {arr.map(element => (<Form.Input id={element} label={element} type="number"/>))}
  </Form.Group>
))

這樣做是首先創建一個二維數組（內部 arrays 有 4 個元素），然后創建第一維和第二維 map。

Answer 2

你可以這樣做

return <Form.Group>
{
    myArray.map((element , index) => {
           return <Form.Input key={index} id={element} label={element} type="number"/>
    }
}
</Form.Group>

Answer 3

您可以在數組塊上使用 map。

塊 function 取自這里。

const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
arr.slice(i * size, i * size + size)
);

Map 超過 4 塊並形成組

chunk(myArray).map(ch=>{
    //Return a group
    <Form.Group>
    {ch.map(element=>{
        //return element
    })}
    </Form.Group>
}