时间戳

首页 > 解决方案 > reactJS - JSX 映射数组以形成元素，但将每四个元素分组

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

问题描述

我想创建一个包含大约 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() 函数组合在一起？手动它会像这样工作，但我相信有一种更有效的方法，就像手动这样

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

标签： javascriptarraysreactjs

解决方案

你不能仅仅.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 个元素），然后映射第一维和第二维。

推荐阅读