javascript - 我如何使用 map 呈现项目列表但每 3 个项目分组？

Question

我在数组中有一长串项目。这些需要在一个组件中呈现，这应该一切都很好而且花花公子。但是，我需要每 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>
)

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

Answer 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>