如何在React中创建日历视图并按每7天换行渲染日期数组

步骤1：分割日期数组为每7个一组 #

先把一维日期数组拆成二维数组，每7个元素对应日历的一行，写个简单工具函数就能实现：

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：在React组件中渲染分组后的日期 #

用上面的函数处理日期数组，再嵌套遍历渲染每一行和每一天：

import React from 'react';

const Calendar = () => {
  // 你的原始日期数组
  const dates = [28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,1,2,3,4,5,6,7,8];
  
  // 分割成每7个一组
  const dateRows = chunkArray(dates, 7);

  return (
    <div className="calendar">
      {dateRows.map((row, rowIndex) => (
        <div key={rowIndex} className="calendar-row">
          {row.map((day, dayIndex) => (
            <div key={`${rowIndex}-${dayIndex}`} className="calendar-day">
              {day}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

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

export default Calendar;

步骤3：添加基础样式（可选） #

给日历加些样式让布局更规整：

.calendar {
  max-width: 420px;
  margin: 0 auto;
}

.calendar-row {
  display: flex;
  justify-content: space-between;
}

.calendar-day {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}

额外提示 #

• 如果日期数组里有跨月的日期（比如示例里的28-31是上月、最后几个1-8是下月），可以给这些日期加个额外类名，用样式区分显示（比如变灰）。
• 元素的key用行索引+日期索引组合，避免渲染时出现重复key警告。

内容的提问来源于stack exchange，提问作者İbrahim Uyar