React中如何将数组元素按每组最多4个渲染为嵌套Div？

1. 编写数组分组函数 #

首先需要把原数组分割成每组最多4个元素的子数组，写一个通用的分组函数即可：

const chunkArray = (arr, groupSize) => {
  const result = [];
  // 循环遍历原数组，每次跳过groupSize个位置
  for (let i = 0; i < arr.length; i += groupSize) {
    // 从当前位置截取到i+groupSize的元素，加入结果数组
    result.push(arr.slice(i, i + groupSize));
  }
  return result;
};

2. 在React组件中处理数据并渲染 #

在你的React组件里，用上面的函数处理dataEstrenos，再通过嵌套的map方法渲染目标结构：

import { dataEstrenos } from './你的数据文件路径';

// 分组函数
const chunkArray = (arr, groupSize) => {
  const result = [];
  for (let i = 0; i < arr.length; i += groupSize) {
    result.push(arr.slice(i, i + groupSize));
  }
  return result;
};

function EstrenosList() {
  // 将原数组拆分为每组4个的子数组
  const groupedItems = chunkArray(dataEstrenos, 4);

  return (
    <div>
      {/* 遍历每个分组，渲染外层容器div */}
      {groupedItems.map((group, index) => (
        <div key={`group-${index}`}>
          {/* 遍历分组内的元素，渲染子项div */}
          {group.map(item => (
            <div key={item.id}>
              {/* 这里替换成你需要展示的内容，比如标题和产品名 */}
              <div>标题：{item.title}</div>
              <div>产品：{item.product}</div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default EstrenosList;

关键细节说明 #

• 分组逻辑：slice(i, i+groupSize)会自动适配数组末尾的情况，如果剩余元素不足4个，只会截取到数组最后一个元素，无需额外处理。
• React Key属性：外层分组用group-${index}作为key（分组顺序固定，索引不会引发问题）；内层子项用item.id作为key，这是每个元素的唯一标识，符合React列表渲染的规范。
• 扩展性：如果后续需要调整每组的元素数量，只需修改chunkArray(dataEstrenos, 4)中的数字4即可。

内容的提问来源于stack exchange，提问作者Fabricio Bisso