search
HomeWeb Front-endJS TutorialDetailed explanation of how to develop calendar components using react
Detailed explanation of how to develop calendar components using reactSep 06, 2018 pm 04:53 PM
cssjavascriptreact.jswebpackcalendar

本篇文章给大家带来的内容是关于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文件,这是我们的入口文件

nbsp;html>


    <meta>
    <title>Document</title>


    <p></p>
    <script></script>

以上环境只是一个极简单的环境,真实环境要比这个复杂的多

好了,言归正传,我们还是聚焦到日历组件的开发中来吧

创建一个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></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>
      </p>
                            {             WEEK_NAMES.map((week, key) => {               return              })           }                                    {           LINES.map((l, key) => {             return                {                 WEEK_NAMES.map((week, index) => {                   return                  })               }                        })         }                
{week}
{index}
    )   } }

可以看到我们使用了一个星期数组作为表头,我们按照惯例是从周日开始的。你也可以从其他星期开始,不过会对下面的日期显示有影响,因为每个月的第一天是周几决定第一天显示在第几个格子里。

那为什么行数要6行呢?因为我们是按照最大行数来确定表格的行数的,如果一个月有31天,而这个月的第一天刚好是周六。就肯定会显示6行了。

为了显示好看,我直接写好了样式放置在index.html中了,这个不重要,不讲解。

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
        * {
            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>


    <p></p>
    <script></script>

下面就要开始显示日期了,首先要把当前月份的日期显示出来,我们先在组件的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  monthDays ) {
      return <span> </span>
    }

    return number
  }

看一下这个函数需要几个参数哈,第一个行数,第二个列数(周几),本月第一天是周几,本月天数。line * 7 + weekIndex表示当前格子本来是几,减去本月第一天星期数字。为什么+1,因为索引是从0开始的,而天数则是从1开始。那么本月最大天数的则过滤掉,返回一个空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  monthDays ) {
      return <span> </span>
    }

    return number
  }

  static formatNumber(num: number): string {
    var _num = num + 1
    return _num 
      {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如何进行组件库的开发


The above is the detailed content of Detailed explanation of how to develop calendar components using react. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)