如何在React中实现列数动态可调的图片行列网格布局

核心思路：先将图片数组按照指定列数分组，每一组对应一行，每行内的列宽度根据列数自动计算适配栅格系统。

完整修改后的Card.js代码 #

import { Row, Col, Image } from 'react-bootstrap'; // 确保引入对应依赖组件

const Card = (props) => {
  const localTiles = props.tiles || [];
  const colCount = props.colCount || 3; // 加默认值避免参数异常报错

  // 按指定列数对图片数组分块，每一块对应一行
  const chunkedTiles = localTiles.reduce((resultArr, currentTile, index) => {
    const groupIndex = Math.floor(index / colCount);
    if (!resultArr[groupIndex]) resultArr[groupIndex] = [];
    resultArr[groupIndex].push(currentTile);
    return resultArr;
  }, []);

  return (
    <div className="card-container">
      {/* 先遍历分组渲染每一行 */}
      {chunkedTiles.map((tileGroup, groupIndex) => (
        <Row key={groupIndex} className="tile-row">
          {/* 再遍历分组内的元素渲染每一列 */}
          {tileGroup.map((tile, tileIndex) => (
            <Col key={tileIndex} md={12 / colCount} className="tile-col">
              <p>{tile.text}</p>
              <Image
                className="tile-image"
                height={100}
                width={300}
                src={tile.imageSource}
                alt={tile.text}
              />
            </Col>
          ))}
        </Row>
      ))}
    </div>
  );
};

export default Card;

逻辑说明 #

• 数组分块逻辑：用reduce方法遍历原图片数组，按照colCount对元素分组，每一组的元素数量等于设置的列数，最后一组不足列数也会单独成行。
• 栅格自适应：Bootstrap栅格系统总宽度为12份，用12 / colCount动态计算每列占的宽度，列数变化时列宽会自动适配。如果没有使用Bootstrap栅格，也可以把Col替换为div，添加样式width: ${100 / colCount}%; display: inline-block;实现相同效果。
• 边界处理：加了默认列数和空数组兜底，避免传入异常值时报错。

按以上代码修改后，当配置colCount: 2、传入4张图片时，会自动生成2行2列的网格布局，完全符合需求。

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