如何使用 map 呈现项目列表，但每 3 个项目分组？答案

【问题标题】：How could I use map to render a list of items but grouped at every 3 items?如何使用 map 呈现项目列表，但每 3 个项目分组？
【发布时间】：2019-07-20 14:18:19
【问题描述】：

我有一个数组中的一长串项目。这些需要在一个组件中呈现，这应该很好。但是，我需要在每 3 个项目处将它们包装在另一个组件中。

所以，如果我只是渲染项目，它会是这样的：

return (
  <div>
    items.map((x, index) => {
      <span key={index}>{x}</span>
    })
  </div>
)

但基本上，我希望每三个项目都包装在一个具有特殊类的 div 中，所以是这样的：

return (
  <div>
    <div className='group-of-3'>
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
    </div>
    <div className='group-of-3'>
      <span>Item 4</span>
      <span>Item 5</span>
      <span>Item 6</span>
    </div>
    .
    .
    .
  </div>
)

理想的方法是什么？请记住，项目的数量确实会发生变化，因此手动操作是不可能的。

【问题讨论】：

当index%3 是1 打开内部div。当index%3 为0 时关闭内部div。
@PM77-1 反应不是必须的，你不能“打开”和“关闭”div：元素内容应该在创建时知道。
@zerkms - 我不熟悉 ReactJS。所以我不能在地图函数中添加代码？
@PM77-1 可以，但它必须返回完整的元素。请参阅发布的答案，希望它能更好地澄清这一点。
我的看法：codesandbox.io/s/qlmm0rrzqj

标签： javascript arrays reactjs

【解决方案1】：

使用纯 JavaScript，您可以使用 Array.reduce() 从您的项目创建子数组。然后在你的项目上映射两次：

const group = (items, n) => items.reduce((acc, x, i) => {
  const idx = Math.floor(i / n);
  acc[idx] = [...(acc[idx] || []), x];
  return acc;
}, []);

function Example({ items }) {
  return (
    <div>{group(items, 3).map(children =>
        <div className='group-of-3'>
          {children.map((x, i) => <span key={i}>{x}</span>)}
        </div>
    )}</div>
  );
}

ReactDOM.render(
  <Example items={[1, 2, 3, 4, 5, 6, 7, 8]} />,
  document.getElementById('root')
);

.group-of-3 {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
  width: 50px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

这是一个天才的解决方案。非常感谢！

【解决方案2】：

您可以使用 Lodash chunk 将您的数组拆分为长度为 3 的数组并分别渲染。

示例

function App(props) {
  const chunkedItems = _.chunk(props.items, 3);

  return (
    <div>
      {chunkedItems.map((arr, index) => (
        <div key={index}>
          {arr.map((item, index) => (
            <span key={index}>{item}</span>
          ))}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(
  <App items={[1, 2, 3, 4, 5, 6, 7]} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案3】：

您可以使用Array.from() 将列表拆分为类别，并使用内部Array.map() 来呈现项目：

const items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11'];

const Demo = ({ items, size = 3 }) => (
  <div>
    {Array.from(
      { length: Math.ceil(items.length / size) },
      (_, i) => (
        <div key={i} className='group-of-3'>
        {items.slice(i * size, (i + 1) * size)
          .map((item) => <span key={item}>{item}</span>)
        }
        </div>
      )
    )}
  </div>
);


ReactDOM.render(
  <Demo items={items} />,
  demo
);

.group-of-3 {
  margin: 1em 0;
  border: 1px solid black;
}

span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

【讨论】：

【解决方案4】：

您可以先将数组的元素分组为多个较小的数组，每个数组包含 3 个元素。

const arr = [1,2,3,4,5,6,7,8,9];

const grouped = arr.reduce((res, el, i) => {
  if (i % 3 === 0) {
    res[res.length] = [el];
  } else {
    res[res.length-1] = [...res[res.length-1], el];
  }
  return res;
}, []);

console.log(grouped);

【讨论】：