Показывать столбцы каждые четыре записи

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>
  );
}

Пожалуйста, посмотрите песочница .

Answer 2

Вы можете сделать что-то подобное перед рендерингом столбцов,

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

Важно ли, чтобы у вас было 4 элемента, разделенных на разные контейнеры div?

У Bulma есть класс .is-multiline, который входит в контейнер .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>
})}

Answer 5

Для достижения того же макета вы можете использовать свойство sizing столбцов 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>