javascript - 在4个元素之后将输出数组转换为名为“row”的新div

我当前正在使用引导程序，并希望我的输出位于某个网格中。因此，为此，我需要将我的数组分成3堆，并将它们放入类名为“ row”的div中。数组的分组已经完成，但是我不知道如何从这里继续，因为不再渲染了，我只在连续atm中渲染1个元素。

数组：

const itemsToRender = [{
  id: '1',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '2',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '3',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '4',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '5',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '6',
  name: 'Item1',
  image: 'item1.png'
  }]

分组：

function splitArrayIntoChunks(arr, chunkLen){
  var chunkList = []
  var chunkCount = Math.ceil(arr.length/chunkLen)
  for(var i = 0; i < chunkCount; i++){
      chunkList.push(arr.splice(0, chunkLen))
  }
  return chunkList}

var chunks = splitArrayIntoChunks(itemsToRender, 3)

组件代码：

return (
  <div className="container">
    <div className="row">
      {itemsToRender.map(item => (
      <Item key={item.id} item={item}/>
      ))}
    </div>
 </div>
 )

我想要的结果应该是这样的：

<div class="container">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
        </div>
        <div class="row">
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
        </div>
</div>

最佳答案

您可以使用.slice编写将数组划分为卡盘的方法。
请注意，与.slice不同，.splice不会突变原始数组。

它看起来像这样：

const makeChunks = (array = [], numOfChuncks = 1) => {
  let chunks = [];
  let currentChunck = 0;

  while (currentChunck < array.length) {
    chunks.push(array.slice(currentChunck, currentChunck += numOfChuncks));
  }

  return chunks;
}

这是一个正在运行的示例：

const makeChunks = (array = [], numOfChuncks = 1) => {
  let chunks = [];
  let currentChunck = 0;

  while (currentChunck < array.length) {
    chunks.push(array.slice(currentChunck, currentChunck += numOfChuncks));
  }

  return chunks;
}


const itemsToRender = [{
  id: '1',
  name: 'Item1',
  image: 'item1.png'
}, {
  id: '2',
  name: 'Item2',
  image: 'item1.png'
}, {
  id: '3',
  name: 'Item3',
  image: 'item1.png'
}, {
  id: '4',
  name: 'Item4',
  image: 'item1.png'
}, {
  id: '5',
  name: 'Item5',
  image: 'item1.png'
}, {
  id: '6',
  name: 'Item6',
  image: 'item1.png'
}];

const groupedBy3 = makeChunks(itemsToRender, 3);

const Item = ({ item }) => (
    <div className="col-xs-3">{item.name}</div>
);

class App extends React.Component {
  render() {
    return (
      <div className="container">
        {Object.keys(groupedBy3).map(key => {
          return (
            <div key={key} className="row">
              {
                groupedBy3[key].map(item => (<Item key={item.id} item={item} />))
              }
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

关于javascript - 在4个元素之后将输出数组转换为名为“row”的新div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48361902/