react+moment.js封装日历组件

以下是一个简化的React日历组件，使用了moment.js来处理日期，并展示了如何在React组件中使用状态和生命周期方法。

import React, { Component } from 'react';
import moment from 'moment';
import '../style/Calendar.css';
 
class Calendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMonth: moment().startOf('month'),
        };
    }
 
    // 获取日历的天数
    getDaysOfMonth = () => {
        const daysOfMonth = [];
        const monthStart = this.state.currentMonth.startOf('month');
        const monthEnd = this.state.currentMonth.endOf('month');
        let currentDay = monthStart.startOf('week');
 
        while (currentDay.isBefore(monthEnd)) {
            daysOfMonth.push(currentDay);
            currentDay = currentDay.clone().add(1, 'days');
        }
        return daysOfMonth;
    };
 
    render() {
        const daysOfMonth = this.getDaysOfMonth();
        return (
            <div className="calendar">
                <div className="calendar-header">
                    <button onClick={() => this.setState({ currentMonth: this.state.currentMonth.subtract(1, 'months') })}>{'<'}</button>
                    <h2>{this.state.currentMonth.format('MMMM YYYY')}</h2>
                    <button onClick={() => this.setState({ currentMonth: this.state.currentMonth.add(1, 'months') })}>{'>'}</button>
                </div>
                <div className="calendar-body">
                    <div className="week-days">
                        <div>Su</div>
                        <div>Mo</div>
                        <div>Tu</div>
                        <div>We</div>
                        <div>Th</div>
                        <div>Fr</div>
                        <div>Sa</div>
                    </div>
                    <div className="days-of-month">
                        {daysOfMonth.map((day, index) => (
                            <div key={index} className={day.month() === this.state.currentMonth.month() ? 'day' : 'day other-month'}>
                                {day.date()}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}
 
export default Calendar;