1、安装Antd

yarn add antd

2、引入Antd相关文件

• 按需引入组件：

// 引入antd的日期选择器以及分页组件
import { DatePicker,Pagination } from 'antd';

• 引入Antd的css文件：

// 引入Antd的css文件
import 'antd/dist/antd.css';

3、Antd组件英文转中文

由于Antd为了适应国际化，默认组件使用的是英文展示的，因此这类问题就需要使用Antd的中文包去转换。

// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';

    render(){
        return (
        <ConfigProvider locale={zhCN}>
            <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={this.handleChange}/>
            <DatePicker/>
        </ConfigProvider>
        )
    }

转换前.png

转换后.png

4、moment.js时间日期库的使用

// moment.js库
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

render(){
        return (
        <ConfigProvider locale={zhCN}>
            <DatePicker/>
        </ConfigProvider>
        )
    }

效果展示.png

5、代码

import React,{Component} from 'react'

// 引入antd
import { ConfigProvider,DatePicker,message,Pagination } from 'antd';
import 'antd/dist/antd.css';
// moment.js库中文
import moment from 'moment';
import 'moment/locale/zh-cn';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';
moment.locale('zh-cn');

export default class AntdUI extends Component {

    state = {
        value:''
    }

    handleChange = (pageNumber) => {
        console.log('Page: ', pageNumber);
    }

    handleChangeDate = (value) => {
        message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
        this.setState({
            value
        })
    }

    render(){
        const {value} = this.state;
        return (
        <ConfigProvider locale={zhCN}>
            <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={this.handleChange}/>
            <DatePicker onChange={this.handleChangeDate} />
            <div>当前日期：{value ? value.format('YYYY年MM月DD日') : '未选择'}</div>
        </ConfigProvider>
        )
    }
}