如何基于React-Bootstrap动态创建新行并按日期切换行布局？

我来帮你搞定这个需求！核心思路是先把天气数据按日期分组，然后为每一天的天气单独生成一个<Row>组件——因为React-Bootstrap的<Row>本身是块级元素，每个Row会自动独占一行，不同日期的卡片自然就会换行显示了。

步骤1：添加日期格式化的辅助函数 #

首先需要把时间戳转换成统一的日期格式（比如YYYY-MM-DD），用来作为分组的依据：

// 辅助函数：将时间戳转换为标准日期字符串
const getDateString = (timestamp) => {
  const date = new Date(timestamp);
  // 补零保证日期格式统一（比如1月变成01，5号变成05）
  return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

步骤2：修改组件逻辑，按日期分组生成Row #

接下来用Array.reduce()把原始天气列表按日期分组，再遍历每个分组生成对应的Row和卡片。修改后的完整代码如下：

import React from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'

const WeatherList = ({weathers}) => {
  // 辅助函数：转换时间戳为标准日期字符串
  const getDateString = (timestamp) => {
    const date = new Date(timestamp);
    return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  };

  // 按日期分组天气数据：键是日期，值是当天的所有天气项
  const groupedWeathers = weathers.list.reduce((acc, item) => {
    const date = getDateString(item.dt * 1000);
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push(item);
    return acc;
  }, {});

  return (
    <>
      {/* 遍历每个日期分组，生成独立的Row */}
      {Object.entries(groupedWeathers).map(([date, dailyWeathers]) => (
        <Row key={date} className="mb-3"> {/* mb-3给行之间加间距，可选 */}
          {dailyWeathers.map(({dt, main, weather}) => (
            <Col key={dt}>
              <WeatherCard
                dt={dt * 1000}
                temp_min={main.temp_min}
                temp_max={main.temp_max}
                humidity={main.humidity}
                temp={main.temp}
                main={weather[0].main}
                city={weathers.city.name}
                country={weathers.city.country}
              />
            </Col>
          ))}
        </Row>
      ))}
    </>
  )
}

export default WeatherList;

关键逻辑说明 #

1. 分组处理：reduce方法遍历所有天气项，把同一天的天气归集到同一个数组里，确保每个日期对应一组数据。
2. 动态行生成：用Object.entries()把分组后的对象转成键值对数组，每一组对应一天的天气，生成一个独立的<Row>。
3. 样式优化：className="mb-3"是Bootstrap的间距类，给每行之间增加一些空隙，让布局更美观，你可以根据需求调整或移除。

这样不管某天有1个还是5个预测卡片，都会在同一行显示；第二天的卡片会自动切换到新行，完全符合你的需求！

内容的提问来源于stack exchange，提问作者J.erome