React 函数组件日历渲染：告别 DOM 操作，拥抱状态驱动

export const Calendar = () => {
  const currentDate = document.querySelector(".current-date") || {}; // 问题点1
  let daysTag = document.querySelector(".days") || {};               // 问题点2
  // ...
  const renderCalendar = () => {
    // ...
    currentDate.innerText = `${months[currMonth]} ${currYear}`; // 问题点3
    daysTag.innerHTML = liTag;                                  // 问题点4
  };
  renderCalendar(); // 首次调用位置
  // ...
  prevNextIcon.forEach ( icon => {
    icon.addEventListener("click", () => { // 问题点5
      // ...
      renderCalendar();
    });
  });
  // ...
  return (
    // ... JSX 结构
  );
}

import React, { useState, useEffect, useCallback } from 'react';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

export const Calendar = () => {
  // 初始化当前日期
  const today = new Date();
  const [currYear, setCurrYear] = useState(today.getFullYear());
  const [currMonth, setCurrMonth] = useState(today.getMonth()); // 0-11
  const [currentDateText, setCurrentDateText] = useState(""); // 用于显示 "May 2023"
  const [daysInMonth, setDaysInMonth] = useState([]); // 用于存储日历中的所有日期数据

  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  // ... (其他代码)
};

  // 使用 useCallback 优化，避免每次渲染都重新创建函数
  const generateCalendarDays = useCallback(() => {
    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(); // 获取当月第一天是星期几 (0-6)
    let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(); // 获取当月最后一天
    let lastDayofLastMonth = new Date(currYear, currMonth, 0).getDate(); // 获取上月最后一天

    let days = [];

    // 填充上月日期
    for (let i = firstDayofMonth; i > 0; i--) {
      days.push({
        date: lastDayofLastMonth - i + 1,
        type: 'inactive',
        key: `prev-${lastDayofLastMonth - i + 1}` // 添加唯一 key
      });
    }

    // 填充当月日期
    for (let i = 1; i <= lastDateofMonth; i++) {
      let isToday = i === today.getDate() && currMonth === today.getMonth() && currYear === today.getFullYear();
      days.push({
        date: i,
        type: isToday ? 'active' : '',
        key: `curr-${i}`
      });
    }

    // 填充下月日期 (确保日历有 6 行，即 42 个格子)
    let totalDaysDisplayed = days.length;
    let remainingSlots = 42 - totalDaysDisplayed; // 假设日历固定显示 6 周
    if (remainingSlots < 0) remainingSlots = 0; // 避免负数，虽然通常不会发生

    for (let i = 1; i <= remainingSlots; i++) {
      days.push({
        date: i,
        type: 'inactive',
        key: `next-${i}`
      });
    }

    // 更新状态
    setDaysInMonth(days);
    setCurrentDateText(`${months[currMonth]} ${currYear}`);
  }, [currYear, currMonth, today]); // 依赖项：当年份或月份变化时重新计算

  // 使用 useEffect 在组件挂载或 currYear/currMonth 变化时执行日历生成
  useEffect(() => {
    generateCalendarDays();
  }, [generateCalendarDays]); // 依赖 generateCalendarDays 函数

  return (
    <div className="auth flexContainer">
      <h1>Calendar</h1>
      <div className="wrapper">
        <header>
          <p className="current-date">{currentDateText}</p> {/* 直接绑定状态 */}
          <div className="icons">
            <ArrowBackIosIcon id="prev" className="arrow" onClick={() => {
              setCurrMonth(prevMonth => {
                let newMonth = prevMonth - 1;
                if (newMonth < 0) {
                  setCurrYear(prevYear => prevYear - 1);
                  return 11; // 11代表12月
                }
                return newMonth;
              });
            }}/>
            <ArrowForwardIosIcon id="next" className="arrow" onClick={() => {
              setCurrMonth(prevMonth => {
                let newMonth = prevMonth + 1;
                if (newMonth > 11) {
                  setCurrYear(prevYear => prevYear + 1);
                  return 0; // 0代表1月
                }
                return newMonth;
              });
            }}/>
          </div>
        </header>
        <div className="calendar">
          <ul className="weeks">
            <li>Sunday</li>
            <li>Monday</li>
            <li>Tuesday</li>
            <li>Wednesday</li>
            <li>Thursday</li>
            <li>Friday</li>
            <li>Saturday</li>
          </ul>
          <ul className="days">
            {daysInMonth.map(day => (
              <li key={day.key} className={day.type}>{day.date}</li> // 映射数组生成列表
            ))}
          </ul>
        </div>
      </div>
    </div>
  );

import React, { useState, useEffect, useCallback } from 'react';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

export const Calendar = () => {
  // 获取当前日期，用于标记“今天”
  const today = new Date();

  // 使用 useState 管理当前显示的年份和月份
  const [currYear, setCurrYear] = useState(today.getFullYear());
  const [currMonth, setCurrMonth] = useState(today.getMonth()); // 月份从0开始 (0-11)

  // 用于显示日历