react实现日历翻页效果

实现日历翻页效果的核心思路

日历翻页效果通常涉及日期数据的动态切换和动画过渡。React中可通过状态管理日期数据，结合CSS动画或第三方动画库实现视觉翻页效果。

基础实现步骤

状态管理 使用React的useState管理当前显示的月份和年份。初始化时可设置为当前日期：

const [currentDate, setCurrentDate] = useState(new Date());

日期切换逻辑 实现月份切换的函数，通过修改currentDate状态触发重新渲染：

const changeMonth = (direction) => {
  const newDate = new Date(currentDate);
  direction === 'prev' 
    ? newDate.setMonth(newDate.getMonth() - 1)
    : newDate.setMonth(newDate.getMonth() + 1);
  setCurrentDate(newDate);
};

日历渲染 根据currentDate生成当月日历数据并渲染：

const renderCalendar = () => {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  // 生成当月天数数组的逻辑
  return /* 日历UI */;
};

动画效果实现

CSS过渡动画 为日历容器添加CSS过渡效果：

.calendar-container {
  transition: transform 0.3s ease;
}

使用React Transition Group 安装并应用动画库实现更复杂的过渡：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={key}  // 用月份作为key触发动画
  timeout={300}
  classNames="page"
>
  {renderCalendar()}
</CSSTransition>

完整组件示例

import React, { useState } from 'react';
import './Calendar.css';

function Calendar() {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [animationKey, setAnimationKey] = useState(0);

  const changeMonth = (direction) => {
    setAnimationKey(prev => prev + 1);
    const newDate = new Date(currentDate);
    direction === 'prev' 
      ? newDate.setMonth(newDate.getMonth() - 1)
      : newDate.setMonth(newDate.getMonth() + 1);
    setCurrentDate(newDate);
  };

  const renderDays = () => {
    // 实现具体日期渲染逻辑
    return /* 日期元素数组 */;
  };

  return (
    <div className="calendar-container">
      <div className="calendar-header">
        <button onClick={() => changeMonth('prev')}>上一月</button>
        <h2>{currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>
        <button onClick={() => changeMonth('next')}>下一月</button>
      </div>
      <div className="calendar-grid" key={animationKey}>
        {renderDays()}
      </div>
    </div>
  );
}

进阶优化方向

手势支持 添加react-swipeable实现滑动翻页：

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({
  onSwipedLeft: () => changeMonth('next'),
  onSwipedRight: () => changeMonth('prev')
});

<div {...handlers}>{/* 日历内容 */}</div>

性能优化 使用React.memo优化日期单元格渲染：

const DayCell = React.memo(({ day }) => {
  return <div className="day-cell">{day}</div>;
});

3D翻页效果 通过CSS 3D变换实现立体翻页：

.page-enter {
  transform: rotateY(90deg);
}
.page-enter-active {
  transform: rotateY(0deg);
  transition: transform 300ms;
}