时间戳

首页 > 解决方案 > 每四条记录显示一列

reactjs - 每四条记录显示一列

问题描述

我正在努力如何每四条记录显示列或中断列。我正在使用 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>

标签： reactjsbulma

解决方案

您可以从数组中创建块，然后用<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>
  );
}

请参阅沙盒。

推荐阅读