每四个记录显示列数

Question

我正在努力如何每四条记录显示一列或中断一列。我使用的是bulma列，我的目标是在数组映射内的每四个记录上显示列。感谢您的帮助。

在地图功能内部

{list.map(function(item, key){
return <div className="columns">
    <div className="column">{item.name}</div>
</div>
})}

假设列表是8条记录，预期结果应该是这样

<div className="columns">
   <div className="column">name 1</div>
   <div className="column">name 2</div>
   <div className="column">name 3</div>
   <div className="column">name 4</div>
</div>
<div className="columns">
  <div className="column">name 5</div>
  <div className="column">name 6</div>
  <div className="column">name 7</div>
  <div className="column">name 8</div>
</div>

Answer 1

您可以从数组中创建块，然后用<div className="columns">包装每个块>

function array_chunks(array, chunks) {
  let result = [];
  let n = array.length;
  for (let i = 0; i < n; i += chunks) {
    result = [...result, array.slice(i, i + chunks)];
  }
  return result;
}

let columns = array_chunks(list, 4);


function App() {
  return (
    <div className="App">
      {columns.map(function(items, key) {
        return (
          <div className="columns">
            {items.map(function(item) {
              return <div className="column">{item.name}</div>;
            })}
          </div>
        );
      })}
    </div>
  );
}
请参阅sandbox。

Answer 2

您可以在呈现列之前执行类似的操作，

Answer 3

为了获得相同的布局，可以使用sizing property of Bulma列：

Answer 4

我参加聚会有点晚了。但这是一个更精确的解决方案：