如何遍历数组每3项放入新row类Div？React JSX技术问询

我来帮你搞定这个分组渲染的问题！你现在的代码只是逐个生成了列元素，但没做分组，我们只需要先把数组拆分成每3个一组的子数组，再对应渲染每个row容器就行。

步骤1：写一个数组分组辅助函数 #

首先我们需要一个工具函数，把你的手机数组分割成指定大小的块：

const chunkArray = (arr, chunkSize) => {
  const result = [];
  // 每次跳chunkSize个元素，截取子数组
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result;
};

步骤2：在JSX中分组渲染 #

接下来在你的渲染逻辑里，先把原数组分成每3个一组，再遍历每个组生成row，组内再遍历生成对应的列和Mobile组件：

{(() => {
  // 把手机数组按每3个一组拆分
  const groupedMobiles = chunkArray(this.state.mobiles, 3);
  
  return groupedMobiles.map((mobileGroup, rowIndex) => (
    // 给每个row设置唯一key
    <div key={`mobile-row-${rowIndex}`} className="row">
      {mobileGroup.map(mobile => (
        <div key={mobile.DeviceName} className="col col-md-4 col-sm-1">
          <Mobile deviceName={mobile.DeviceName} />
        </div>
      ))}
    </div>
  ));
})()}

补充说明 #

• 我们用了一个立即执行函数来在JSX内部处理分组逻辑，让代码更紧凑；
• 每个row的key用rowIndex是安全的，因为分组的顺序不会随意变更；
• 如果最后一组不足3个元素，这个逻辑也能自动适配，不会报错，会生成包含1-2个元素的row。

内容的提问来源于stack exchange，提问作者Arsalan Khattak