ant 生成html 乱码,Ant Design for React的DatePicker日期组件设置默认显示中文的方法

本文详细介绍了如何在使用蚂蚁金服的前端UI框架AntDesign的React版本中,将日期选择器 DatePicker 等组件设置为中文。通过引入中文包,设置 moment 和 ConfigProvider,可以实现组件及全局的中文国际化配置。此外,还提到了在启用ContentSecurityPolicy时,如何配置csp属性来支持动态样式。
摘要由CSDN通过智能技术生成

蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。今天在使用其中的 DatePicker 日期组件时遇到一个问题,其中有一些按钮显示英文,如下图所示:

c8cd775da2b7d235951816cf1ac547da.png

官方给出了设置中文的方法,称之为“国际化配置”:

默认配置为 en-US,如有特殊需求(仅修改单一组件的语言),可使用 locale 参数,参考:默认配置。

单一组件设置为中文:import zhCN from 'antd/es/date-picker/locale/zh_CN'; // 引入中文包

// 组件添加 locale 属性

; // 设置为中文

注意:DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取,需要先正确设置 moment 的 locale。// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale

import moment from 'moment';

import 'moment/locale/zh-cn';

moment.locale('zh-cn');

;

如果页面中的日期组间比较多,可以为组件设置统一的全局化变量。

ConfigProvider全局化配置:

ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

用法:import { ConfigProvider } from 'antd';

// ...

return (

);

其实也不一定需要包裹整个应用,只在在有组件的部分进行包裹也可以。下面是代码展示:import {Form, Input, Select, Row, Col, Checkbox, Button, AutoComplete, LocaleProvider, DatePicker, ConfigProvider } from 'antd'; // Ant

import zhCN from 'antd/es/locale/zh_CN'; // 引入语言包

import moment from 'moment';

import 'moment/locale/zh-cn';

moment.locale('zh-cn'); // 注意这里设置 moment 必须放在有 import 的后面。

const { RangePicker } = DatePicker;

class Page extends React.Component {

return (

 // 设置 local 为中文。

时间流程

报名时间

} labelCol={{span: 4}} wrapperCol={{span: 20}}>

showTime={{ format: 'HH:mm' }}

format="YYYY-MM-DD HH:mm"

placeholder={['开始时间', '结束时间']}

onChange={onChange}

onOk={onOk}

/>

初试时间

} labelCol={{span: 4}} wrapperCol={{span: 20}}>

showTime={{ format: 'HH:mm' }}

format="YYYY-MM-DD HH:mm"

placeholder={['开始时间', '结束时间']}

onChange={onChange}

onOk={onOk}

/>

);

}

}

ReactDOM.render(, mountNode);

这样就可以显示中文了:

b1545cdb33ee19b7b99e758c0cfeb110.png

Content Security Policy

另外,部分组件为了支持波纹效果,使用了动态样式。如果开启了 Content Security Policy (CSP),你可以通过 csp 属性来进行配置:

My Button

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值