每四条记录显示一列

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

您可以在渲染列之前执行类似的操作，

let columns = [];
let records = [1,2,3,4,5,6,7,8];
const recordsPerColumn = 4
while (records.length) {
   columns.push(records.splice(0, recordsPerColumn));
}
// this will group the records in size of 4, which then you can iterate over 

return (
    ....
        {columns.map(function(column, key){
            return <div className="columns">
                { // for rendering the items dynamically, this will also hold good in case there are less than 4 records for say the last group
                    column.map(item=> <div className="column">{item}</div>)
                }

            </div>
        })}
    ....


)

Answer 2

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

我来晚了一点。但这里有一个更精确的解决方案：

你可以在这里使用Array.reduce。

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

{
  columns
    .reduce((acc, curr, index, self) => {
      if (index % 4 === 0) acc.push(self.slice(index, index + 4));
      return acc;
    }, [])
    .map((items, _idx) => (
      <div className="columns" key={_idx}>
        {
          items.map(item => (
            <div className="column" key={item}>{item}</div>
          ))
        }
      </div>
    ))
}

Answer 4

为了实现相同的布局，您可以使用 sizing property of Bulma 列：

return (
  <div className="columns">
    {list.map(function(item, key) {
      return (
        // Orders 4 items per column, rest of items rearrange automatically
        <div className="column is-one-quarter">{item.name}</div>
      )
    }}
  </div>
)}

如果您需要特定的数据结构（出于某些其他原因），则必须将数据转换为特定的数据结构。

function chunk (arr, len) {

  var chunks = [],
      i = 0,
      n = arr.length;

  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }

  return chunks;
}

const dummyArray = new Array(20).fill(1);

const { useState, useEffect } = React;

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    setData(chunk(dummyArray, 4));
  }, []);
  return (
    <main>
      {data.map((item, index) => (
        <div className="columns" key={index}>
          {item.map((subitem, index)=> (
            <div className="column" key={index}>
             <p>1</p>
            </div>
          ))}
        </div>
      ))}
    </main>
  );
}


ReactDOM.render(<App />, document.getElementById("app"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 5

是否必须将 4 件物品分成不同的 div 容器？

Bulma 有一个 .is-multiline class 位于 .columns 容器上，可让您添加任意数量的列，它们会自动换行，从而让您创建项目网格每列 4 列。

https://bulma.io/documentation/columns/options/#multiline

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" rel="stylesheet"/>

<div class="columns is-multiline is-mobile">
<div class="column is-3">1</div>
<div class="column is-3">2</div>
<div class="column is-3">3</div>
<div class="column is-3">4</div>
<div class="column is-3">5</div>
<div class="column is-3">6</div>
<div class="column is-3">7</div>
<div class="column is-3">8</div>
</div>

所以也许可以这样编辑您的代码：

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

每四条记录显示一列

Show columns every four records

reactjs

bulma