如何用循环在React中动态生成多行多列的Div组件

问题分析 #

你现有代码的核心问题：

• 循环中每次直接覆盖res变量，最终只会保留最后一次循环生成的单个Row，完全没实现多数量的动态渲染
• 硬编码了每行5个Col，无法灵活调整每行数量，也没法根据dbRes自动计算行数

实现思路 #

1. 先根据dbRes生成所有需要的卡片组件数组
2. 将数组按「每行指定数量」分组，每组对应一个Row
3. 渲染所有分组后的Row

完整代码示例 #

const SearchRes = () => {
  const dbRes = 10; // 修改这个数值会自动调整生成的卡片总数
  const itemsPerRow = 5; // 可改为4，控制每行显示的卡片数量

  const user = {            
    uname: 'Piggy',
    lang: 'English',
    country: 'England',
    level: 'Noob'
  };

  // 生成所有卡片的Col组件数组
  const cardCols = Array.from({ length: dbRes }, (_, index) => (
    <Col key={index}>
      <div style={{border: '2px solid red', width: '200px'}}>
        <p>Name:&nbsp;{user.uname}</p>
        <p>Language:&nbsp;{user.lang}</p>
        <p>Count:&nbsp;{user.country}</p>
        <p>Level:&nbsp;{user.level}</p>
      </div>
    </Col>
  ));

  // 将卡片数组按每行数量分组，生成Row数组
  const rows = [];
  for (let i = 0; i < cardCols.length; i += itemsPerRow) {
    rows.push(
      <Row key={i}>
        {cardCols.slice(i, i + itemsPerRow)}
      </Row>
    );
  }

  return (
    <Container>
      {rows}
    </Container>
  );
};

代码说明 #

• Array.from({ length: dbRes })：快速生成长度为dbRes的数组，每个元素对应一个卡片组件，index作为key确保React渲染稳定性
• cardCols.slice(i, i + itemsPerRow)：每次从卡片数组中截取当前行需要的元素，自动处理最后一行元素不足的情况
• 修改dbRes（比如改为20）时，卡片总数会自动变化，行数也会根据itemsPerRow自动计算（20个卡片、每行5个的话就是4行）

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