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>{&nbsp; &nbsp; myArray.map((element , index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <Form.Input key={index} id={element} label={element} type="number"/>&nbsp; &nbsp; }}</Form.Group>