React中实现Flex组件：将对象数组数据成对放入容器

1. 实现通用数组分组工具函数 #

先写一个可复用的数组分组函数，将原始项目数组按每2个元素为一组拆分：

const chunkArray = (arr, chunkSize) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
};

2. 在Home组件中嵌套渲染 #

用上述函数处理项目数据后，通过两层map完成渲染：外层遍历分组后的数组生成projectRow容器，内层遍历每组项目渲染Project组件。

import Project from './Project';

const Home = ({ projects }) => {
  // 将项目数组按每2个一组拆分
  const groupedProjects = chunkArray(projects, 2);

  return (
    <div className="projects">
      {groupedProjects.map((projectGroup) => (
        {/* 用组内项目id拼接作为key，避免index引发的渲染异常 */}
        <div key={projectGroup.map(p => p.id).join('-')} className="projectRow">
          {projectGroup.map((project) => (
            <Project key={project.id} project={project} />
          ))}
        </div>
      ))}
    </div>
  );
};

export default Home;

方案优势 #

• 适配任意数量的项目数据，数组长度为奇数时，最后一组仅单个项目也会被正确包裹
• 工具函数可复用在其他需要分组的场景
• 使用项目唯一id作为key，符合React最佳实践，避免数组顺序变化导致的不必要重渲染

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