搜索
首页web前端js教程使用react开发日历组件的方法详解

使用react开发日历组件的方法详解

不言
不言
Sep 06, 2018 pm 04:53 PM
cssjavascriptreact.jswebpack日历

本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

准备工作

提前需要准备好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 < 10 ? `0${_num}` : `${_num}`
  }

  static getDateByYearMonth(year: number, month: number, day: number=1): Date {
    var date = new Date()
    date.setFullYear(year)
    date.setMonth(month, day)
    return date
  }

  checkToday(line: number, weekIndex: number, weekDay: number, monthDays: number): Boolean {
    var { year, month } = this.state
    var day = Calendar.getDayText(line, weekIndex, weekDay, monthDays)
    var date = new Date()
    var todayYear = date.getFullYear()
    var todayMonth = date.getMonth()
    var todayDay = date.getDate()

    return year === todayYear && month === todayMonth && day === todayDay
  }

  monthChange(monthChanged: number) {
    var { month, year } = this.state
    var monthAfter = month + monthChanged
    var date = Calendar.getDateByYearMonth(year, monthAfter)
    this.setCurrentYearMonth(date)
  }

  render() {
    var { year, month } = this.state
    console.log(this.state)

    var monthDays = Calendar.getCurrentMonthDays(month)
    var weekDay = Calendar.getWeeksByFirstDay(year, month)

    return (

      {this.state.month}
      

        
        
          
            {
              WEEK_NAMES.map((week, key) => {
                return 
              })
            }
          
        
        
        {
          LINES.map((l, key) => {
            return 
              {
                WEEK_NAMES.map((week, index) => {
                  return 
                })
              }
            
          })
        }
        
      

          

            <
            {year} - {Calendar.formatNumber(month)}
            >
          

        
{week}

                    {Calendar.getDayText(key, index, weekDay, monthDays)}
                  

    
)
  }
}

可以看到最终的代码多了一些东西，因为我加了月份的切换。

还记的上文我们把二月份天数写死的18天嘛？要不你们自己改改，判断一下闰年。

相关推荐：

React进行组件开发步骤详解

使用React如何进行组件库的开发


以上是使用react开发日历组件的方法详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
JavaScript在行动中：现实世界中的示例和项目JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScript超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
节省R.E.P.O.解释（并保存文件）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前ByDDD
显示更多

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7564
15
CakePHP 教程
1386
52
steam的账户名称是什么格式
86
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
99
显示更多