ReactJS - JSX 映射数组以形成元素，但将每四个元素分组

Question

我想使用语义 UI 创建一个包含大约 30 个元素的表单，如下所示：     <Form.Input        id="survive"        type="number"        label="survive"        required      />所以我想到创建一个包含所有Form.Inputid 和map它们的数组，如下所示：return (        myArray.map((element) => {           <Form.Input id={element} label={element} type="number"/>        })如何使用 array.map() 函数将每四个元素分组在一起？手动它会像这样工作，但我确信有一种更有效的方法可以像这样手动进行<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>

))

其作用是首先创建一个二维数组（内部数组有 4 个元素），然后映射第一维和第二维。

Answer 2

您可以映射数组块。

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

arr.slice(i * size, i * size + size)

);

映射 4 块并形成组

chunk(myArray).map(ch=>{

    //Return a group

    <Form.Group>

    {ch.map(element=>{

        //return element

    })}

    </Form.Group>

}

Answer 3

你可以这样做

return <Form.Group>

{

    myArray.map((element , index) => {

           return <Form.Input key={index} id={element} label={element} type="number"/>

    }

}

</Form.Group>