如何将HTML多列图片画廊优化为使用props的React函数式组件

首先你的代码存在以下几个核心问题：

• 结构不匹配：原HTML是1个row容器下有4个column容器，每个column内放4张图片。你的现有代码遍历每张图片都单独生成1个row和仅含单张图的column，和目标结构完全不符。
• 变量未定义：ImagesColumn组件中使用的imagesPath没有提前声明定义，运行会直接报错。
• 组件拆分冗余：不必要的拆分为ImagesRow、ImagesColumn组件，反而增加了逻辑复杂度。

// 通用图片画廊组件，通过props接收配置
const ImageGallery = ({ images, columnCount = 4, basePath = "/" }) => {
  // 把图片数组按列数分组，每N张为一组对应一个列
  const columnGroups = []
  for (let i = 0; i < images.length; i += columnCount) {
    columnGroups.push(images.slice(i, i + columnCount))
  }

  return (
    <div className="row">
      {columnGroups.map((group, columnIndex) => (
        <div key={columnIndex} className="column">
          {group.map(img => (
            <img 
              key={img.index} 
              src={`${basePath}${img.imagePath}`} 
              alt={`gallery-img-${img.index}`} 
            />
          ))}
        </div>
      ))}
    </div>
  )
}

// 业务组件调用
const Category1 = () => {
  const imagesInfo = [
    { index: '1', imagePath: 'category/category1/1.jpg' },
    { index: '2', imagePath: 'category/category1/2.jpg' },
    { index: '3', imagePath: 'category/category1/3.jpg' },
    { index: '4', imagePath: 'category/category1/4.jpg' },
    { index: '5', imagePath: 'category/category1/5.jpg' },
    { index: '6', imagePath: 'category/category1/6.jpg' },
    { index: '7', imagePath: 'category/category1/7.jpg' },
    { index: '8', imagePath: 'category/category1/8.jpg' },
    { index: '9', imagePath: 'category/category1/9.jpg' },
    { index: '10', imagePath: 'category/category1/10.jpg' },
    { index: '11', imagePath: 'category/category1/11.jpg' },
    { index: '12', imagePath: 'category/category1/12.jpg' },
    { index: '13', imagePath: 'category/category1/13.jpg' },
    { index: '14', imagePath: 'category/category1/14.jpg' },
    { index: '15', imagePath: 'category/category1/15.jpg' },
    { index: '16', imagePath: 'category/category1/16.jpg' },
  ]

  return (
    <div className="category1">
      <ImageGallery 
        images={imagesInfo} 
        columnCount={4} 
        basePath="/" 
      />
    </div>
  )
}

export default Category1

• 结构完全对齐原HTML：单row下4个column，每个column内4张图，样式表现和静态版本一致
• 全参数通过props传递：images控制图片列表、columnCount控制列数、basePath控制图片资源公共前缀，后续复用不需要修改组件内部代码
• 修复了变量未定义问题，所有路径拼接逻辑统一处理，避免拼接错误

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