Javascript 将数组输出到名为"；的新div中；“世界其他地区”；四行之后

我目前正在使用引导，希望我的输出在特定的网格中。因此，我需要将数组分成3堆，并将它们放入一个类名为“row”的div中。数组的分组已经完成，但我不知道如何从这里开始，因为不再渲染，我只渲染一行中的一个元素

数组：

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)

函数splitArrayIntoChunks（arr，chunkLen）{
var chunkList=[]
var chunkCount=Math.ceil（arr.length/chunkLen）
对于（var i=0；i

组件代码：

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

返回(
{itemsToRender.map（项=>(
))}
)

我期望的结果如下：

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

1.
2.
3.
4.
5.
6.

您可以使用类似以下功能：

const rows = items.map((x,i) => {
  return i % 3 === 0 ? items.slice(i, i+3) : null;
}).filter(x => x != null);

在下面的引导中查看它的实际操作

const项=[{
id:'1'，
名称：'Item1'，
图片：“item1.png”
}, {
id:'2'，
名称：'Item1'，
图片：“item1.png”
}, {
id:'3'，
名称：'Item1'，
图片：“item1.png”
}, {
id:'4'，
名称：'Item1'，
图片：“item1.png”
}, {
id:'5'，
名称：'Item1'，
图片：“item1.png”
}, {
id:'6'，
名称：'Item1'，
图片：“item1.png”
}]
常量应用=（）=>{
常量行=items.map（（x，i）=>{
返回i%3==0？项。切片（i，i+3）：空；
}).filter（x=>x！=null）；
返回(
{rows.map（（行，索引）=>{
返回(
{row.map（col=>{col.name}}
);
})}
);
};
render（，document.getElementById（“根”））
span{
左边距：5px；
右边距：5px；
}
您可以使用编写一种将阵列划分为卡盘的方法。

请注意，
.slice
与不同，它不改变原始数组

它看起来像这样：

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=（数组=[]，numofchunks=1）=>{
让chunks=[]；
设currentChunck=0；
while（currentChunck


下面是一个运行示例：


const makeChunks=（数组=[]，numofchunks=1）=>{
让chunks=[]；
设currentChunck=0；
while（currentChunck(
{item.name}
);
类应用程序扩展了React.Component{
render（）{
返回(
{Object.keys（groupedBy3.map）（key=>{
返回(
{
groupedBy3[key].map（项=>（））
}
)
})}
)
}
}
ReactDOM.render（，document.getElementById（'root'））

您能发布一个期望结果的示例吗？当然，更新了注释