准备工作
提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来转义，我们就自己大了个简易的开发环境
创建一个文件夹，命名为react-canlendar
cd ./react-canlendar
运行
npm init
一路enter我们得到一个package.json的文件
安装几个我们需要的脚手架依赖包
npm install awesome-typescript-loader typescript webpack webpack-cli -d
安装几个我们需要的类库
npm install @types/react react react-dom --save
基础类库安装完毕，开始构建webpack配置
新建一个目录config，config下面新增一个文件，名字叫做webpack.js
var path = require('path')module.exports = { entry: { main: path.resolve(__dirname, '../src/index.tsx') }, output: { filename: '[name].js' }, resolve: { extensions: [.ts, .tsx, .js, .json] }, module: { rules: [ {test: /\.tsx?$/, use: ['awesome-typescript-loader']} ] }}
还需要创建一个index.html文件，这是我们的入口文件
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>document</title></head><body> <p id="root"></p> <script src="./dist/main.js"></script></body></html>
以上环境只是一个极简单的环境，真实环境要比这个复杂的多。
好了，言归正传，我们还是聚焦到日历组件的开发中来吧
创建一个src文件夹，内部创建一个index.tsx文件。
这个入口文件很简单就是一个挂载
import * as react from 'react'import * as reactdom from 'react-dom'reactdom.render(( <p> test </p>), document.getelementbyid('root'))
ok，打开页面可以看到页面正常显示了test字样。
我们需要创建calendar组件了。
创建一个components文件夹，内部创建一个calendar.tsx文件。
import * as react from 'react'export default class calendar extends react.component { render() { return (<p> 日历 </p>) }}
在index.tsx中把calendar.tsx引入，并使用起来。于是index.tsx变成这个样子。
import * as react from 'react'import * as reactdom from 'react-dom'import calendar from './components/calendar'reactdom.render(( <p> <calendar/> </p>), document.getelementbyid('root'))
可以看到页面显示了日历字样。
要显示日历，首先需要显示日历这个大框以及内部的一个个小框。实现这种布局最简单的布局就是table了
所以我们首先创建的是这种日历table小框框，以及表头的星期排列。
import * as react from 'react'const week_names = ['日', '一', '二', '三', '四', '五', '六']const lines = [1,2,3,4,5,6]export default class calendar extends react.component { render() { return (<p> <table cellpadding={0} cellspacing={0} classname="table"> <thead> <tr> { week_names.map((week, key) => { return <td key={key}>{week}</td> }) } </tr> </thead> <tbody> { lines.map((l, key) => { return <tr key={key}> { week_names.map((week, index) => { return <td key={index}>{index}</td> }) } </tr> }) } </tbody> </table> </p>) }}
可以看到我们使用了一个星期数组作为表头，我们按照惯例是从周日开始的。你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。
那为什么行数要6行呢？因为我们是按照最大行数来确定表格的行数的，如果一个月有31天，而这个月的第一天刚好是周六。就肯定会显示6行了。
为了显示好看，我直接写好了样式放置在index.html中了，这个不重要，不讲解。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> * { margin: 0; padding: 0; } .table { border-collapse:collapse; border-spacing:0; } .table td{ border: 1px solid #ddd; padding: 10px; } .table caption .caption-header{ border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px; display: flex; justify-content: space-between; } .table caption .caption-header .arrow { cursor: pointer; font-family: 宋体; transition: all 0.3s; } .table caption .caption-header .arrow:hover { opacity:0.7; } </style></head><body> <p id="root"></p> <script src="./dist/main.js"></script></body></html>
下面就要开始显示日期了，首先要把当前月份的日期显示出来，我们先在组件的state中定义当前组件的状态
state = { month: 0, year: 0, currentdate: new date()}
我们定义一个方法获取当前年月，为什么不需要获取日，因为日历都是按月显示的。获取日现在看来对我们没有意义，于是新增一个方法，设置当前组件的年月
setcurrentyearmonth(date) { var month = calendar.getmonth(date) var year = calendar.getfullyear(date) this.setstate({ month, year })}static getmonth(date: date): number{ return date.getmonth()}static getfullyear(date: date): number{ return date.getfullyear()}
创建两个静态方法获取年月，为什么是静态方法，因为与组件的实例无关，最好放到静态方法上去。
要想绘制一个月还需要知道一个月的天数吧，才好绘制吧
所以我们创建一个数组来表示月份的天数
const month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 暂定2月份28天吧
组件上创建一个函数，根据月份获取天数，也是静态的
static getcurrentmonthdays(month: number): number { return month_days[month]}
下面还有一个重要的事情，就是获取当前月份第一天是周几，这样子就可以决定把第一天绘制在哪里了。首先要根据年月的第一天获得date，根据这个date获取周几。
static getdatebyyearmonth(year: number, month: number, day: number=1): date { var date = new date() date.setfullyear(year) date.setmonth(month, day) return date }
这里获得每个月的第一天是周几了。
static getweeksbyfirstday(year: number, month: number): number { var date = calendar.getdatebyyearmonth(year, month) return date.getday() }
好了，开始在框子插入日期数字了。因为每个日期都是不一样的，这个二维数组可以先计算好，或者通过函数直接插入到jsx中间。
static getdaytext(line: number, weekindex: number, weekday: number, monthdays: number): any { var number = line * 7 + weekindex - weekday + 1 if ( number <= 0 || number > monthdays ) { return <span> </span> } return number }
看一下这个函数需要几个参数哈，第一个行数，第二个列数（周几），本月第一天是周几，本月天数。line * 7 + weekindex表示当前格子本来是几，减去本月第一天星期数字。为什么+1，因为索引是从0开始的，而天数则是从1开始。那么<0 || >本月最大天数的则过滤掉，返回一个空span，只是为了撑开td。其他则直接返回数字。
import * as react from 'react'const week_names = ['日', '一', '二', '三', '四', '五', '六']const lines = [1,2,3,4,5,6]const month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]export default class calendar extends react.component { state = { month: 0, year: 0, currentdate: new date() } componentwillmount() { this.setcurrentyearmonth(this.state.currentdate) } setcurrentyearmonth(date) { var month = calendar.getmonth(date) var year = calendar.getfullyear(date) this.setstate({ month, year }) } static getmonth(date: date): number{ return date.getmonth() } static getfullyear(date: date): number{ return date.getfullyear() } static getcurrentmonthdays(month: number): number { return month_days[month] } static getweeksbyfirstday(year: number, month: number): number { var date = calendar.getdatebyyearmonth(year, month) return date.getday() } static getdaytext(line: number, weekindex: number, weekday: number, monthdays: number): any { var number = line * 7 + weekindex - weekday + 1 if ( number <= 0 || number > monthdays ) { return <span> </span> } return number } static formatnumber(num: number): string { var _num = num + 1 return _num { return <td key={key}>{week}</td> }) } </tr> </thead> <tbody> { lines.map((l, key) => { return <tr key={key}> { week_names.map((week, index) => { return <td key={index} style={{color: this.checktoday(key, index, weekday, monthdays) ? 'red' : '#000'}}> {calendar.getdaytext(key, index, weekday, monthdays)} </td> }) } </tr> }) } </tbody> </table> </p>) }}
可以看到最终的代码多了一些东西，因为我加了月份的切换。
还记的上文我们把二月份天数写死的18天嘛？要不你们自己改改，判断一下闰年。
相关推荐：
react进行组件开发步骤详解
使用react如何进行组件库的开发
以上就是使用react开发日历组件的方法详解的详细内容。