html设置时间选择器的字体,关于Antd 时间选择组件文字转换为中文(国际化设置)...-程序员宅基地

技术标签: html设置时间选择器的字体  

Ant Design 官方的文档好像没更新,反正是用起来没配成功,官方的文档和代码也是互相矛盾,我来介绍下我是怎么作国际化的。javascript

Antd 的国际化依赖于 yahoo/react-intl。html

在看这篇文章以前,建议你们看看 antd/antd-mobile 国际化方案。这篇文章并非一个 Start Guidelines。java

文件目录以下node

src/locales 里面放国际化相关资源

l10n.config.js 是配置文件

├── l10n.config.js

├── node_modules

├── package.json

└── src

├── index.html

├── index.js

├── locales

└── utils

```

src/locales 目录咱们新建一个 en-US.js,内容为

```javascript

import antdEn from 'antd/lib/locale-provider/en_US'

import appLocaleData from 'react-intl/locale-data/en'

import enMessages from './en.json'

export default {

messages: {

...enMessages,

},

antd: antdEn,

locale: 'en-US',

data: appLocaleData,

}

在 index.js 里面咱们引入该文件react

import enUS from 'locales/en-US'

官方给的 demo,直接把 enUS 赋值给了 window.appLocale,这样作感受不合理,个人作法是web

const getCurrentAppLocale = () => {

const language = store.get('language_key')

switch (language) {

case 'zh-Hans-CN':

return zhCN

default:

return enUS

}

}

window.appLocale = getCurrentAppLocale()

ReactDOM.render(

locale={window.appLocale.locale}

messages={window.appLocale.messages}

formats={window.appLocale.formats}

>

,

document.getElementById('root')

)

只须要在切换语言的时候,把 language_key 存到 store,而后刷新页面。npm

关于国际化资源的作法,有两种,一种是官方作法,第二种是个人作法。json

官方作法:api

在 package.json 里面的 scripts 加一条antd

"trans": "atool-l10n",

须要国际化的地方使用

而后执行

npm run trans

他会遍历全部的 FormattedMessage,所有存到 en.json,这个过程有一个 bug,若是你默认语言是 en,他是不会自动生成 zh.json 的,若是默认语言是 zh,他会调用有道词典的 API,自动生成 en.json 并翻译。

须要提醒的是,以后生成的

l10n.config.js

并非那么的好用,咱们还要作些修改

具体的参数看这里ant-tool/atool-l10n

个人参数为

module.exports = {

"middlewares": {

"summary": [

"summary?sourcePattern=build/messages/**/*.json"

],

"process": [

"fetchLocal?source=locales,skip",

"metaToResult?from=defaultMessage,to=en",

"youdao?apiname=YourName,apikey=YourKey",

"reduce?-autoPick,autoReduce[]=local,autoReduce[]=meta"

],

"emit": [

"save?dest=src/locales"

]

}

}

个人作法:

既然默认语言为英文的状况下很差用,自动生成 .json 的时候也有必定可能搞乱顺序,讲真,这个工具确实不是那么的可靠…

干脆人肉翻译了,以前作 iOS 的时候,也是要在每种语言的资源下,先添加对应 key value,再在程序中使用。再顺便构造出一个工具类,传入 id,返回标签。

FormattedMessage 的 defaultMessage 不能动态传入,必须是一个肯定值,不过既然决定不用官方的 atool-l10n,也就无所谓啦。

import React from 'react'

import { FormattedMessage } from 'react-intl'

export default function (msgID) {

return (

)

}

在其余地方,引入这个工具类,直接用便可。

注明: 转自大神的方法 附上连接 :Ant Design 的国际化方案

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36008052/article/details/117817716

智能推荐

解决spring-boot-maven-plugin:2.2.1.RELEASE:repackage failed: Unable to find main class找不到或无法加载主类_spring-boot-maven-plugin unable to find main class-程序员宅基地

文章浏览阅读2.1k次,点赞6次,收藏3次。完美解决问题原文链接:https://blog.csdn.net/WillyWithouty/article/details/116120785解决:Execution repackage of goal org.springframework.boot:spring-boot-maven-plugin:2.2.1.RELEASE:repackage failed: Unable to find main class这个大坑整了我一晚上,现在解决了做个总结:首先我们看报错原因,为什么会说不能找到主类_spring-boot-maven-plugin unable to find main class

C++:重定义:符号重定义:变量重定义(二):解决变量重定义(const static)_const变量和普通变量会重定义吗-程序员宅基地

文章浏览阅读1.7k次,点赞2次,收藏2次。C++:重定义:符号重定义:变量重定义(二):解决变量重定义_const变量和普通变量会重定义吗

EndNote登录出现的一个问题_平板上的endnote注册显示not valid-程序员宅基地

文章浏览阅读1.5w次,点赞11次,收藏5次。EndNote登录出现的一个问题之前在电脑上装了个EndNoteX9,然后就想把自己在另一个电脑上整理的一些文献同步到现在这个电脑上,结果同步的时候发现莫名其妙自己的账户名和密码无效,这给我气的,立马去百度查咋回事,结果没找到原因;然后一直保持了很久不能同步的状态,昨天又想到这个事情,狠了狠心卸载,然后下了个20重装;果然还是不行:点Sync Status就显示 ‘The Username/password specified is not valid’;然后各种试:先是看看密码错了没,重新输_平板上的endnote注册显示not valid

HBuilder各种快捷键-程序员宅基地

文章浏览阅读534次。另外还有一些实用的组合键:Alt+T→V  (检验语法文档)Alt+L→H  (代码历史版本)Hbuilder也要吐槽一下:1.打开相对慢。2.新建文件,为什么不能存放到电脑的目录。3.emmet输入 w100,变成了w1→white-space: ;,弄得每次都要w→Tab→再输入100px,这个体验超级繁琐。4.style,script标签默认就不要带'type=*..._builder快速打出1-100

win10+ ubuntu12.04双系统安装教程与遇到的问题-程序员宅基地

文章浏览阅读149次。1. 准备ISO。 参考:网站http://mirrors.ustc.edu.cn/ubuntu-releases/precise/ 下载ubuntu-12.04.5-desktop-amd64.iso2. 按照教程安装。 参考:https://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html3...._windows10 ubuntu12.04

How can I check if one string contains another substring in JavaScript?_c++ upcoj-5529 lozinke-程序员宅基地

文章浏览阅读567次。http://stackoverflow.com/questions/1789945/how-can-i-check-if-one-string-contains-another-substring-in-javascriptvar s = "foo";alert(s.indexOf("oo") > -1);_c++ upcoj-5529 lozinke

随便推点

西门子TIA V17发布,附下载链接<EKB>_wincccomfort v17百度网盘-程序员宅基地

文章浏览阅读7.5k次。3 Startdrive V16相关下载链接可以通过如下网址获取软件和相关的手册信息:Startdrive V16 下载地址:https://support.industry.siemens.com/cs/af/en/view/109771710Startdrive V17下载地址:链接:https://pan.baidu.com/s/1jw3N_yjQ1jYefRd8dxgvdQ提取码:JNBSS120 Start..._wincccomfort v17百度网盘

Linux Camera Driver(1):简介_rv1126 dts 配置双目-程序员宅基地

文章浏览阅读4.1k次,点赞3次,收藏18次。Sensor驱动(具有Media Controller属性)位于kernel/drivers/media/i2c目录。Sensor驱动与RKCIF或者RKISP驱动最大程度上独立,二者异步注册,在dts中由remote-endpoint声明连接关系。Sensor一般作为Sub Device并通过pad与rkcif,rkisp或者MIPI Dphy驱动链接在一起。按照datasheet编写上电时序,主要包括vdd,reset,powerdown,clk等。_rv1126 dts 配置双目

记录spring-cloud-gateway获取post请求body参数,以及后端服务处理后的响应参数过程 gateway:2.2.0.RELEASE_spring-cloud gatway post 请求转义-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏29次。介绍一下框架版本spring-boot:2.2.1.RELEASEspring-cloud:Hoxton.RELEASE(2.2.0.RELEASE)spring-cloud-gateway:2.2.0.RELEASE在网上找了很多版本的代码,不起作用,要么获取不到body数据,要么重新封装request到后端服务,报文丢失或者最大1024b数据,而且代码繁琐。之前参考京东大神的代码,挨着试了一遍,发现版本不对,已经不能用了,附上链接https://blog.csdn.net/tianya_spring-cloud gatway post 请求转义

istio简介和基础组件原理(服务网格Service Mesh)-程序员宅基地

文章浏览阅读7.2w次,点赞49次,收藏340次。Istio简介 Istio:一个连接,管理和保护微服务的开放平台。 按照isito文档中给出的定义: Istio提供一种简单的方式来建立已部署的服务的网络,具备负载均衡,服务到服务认证,监控等等功能,而不需要改动任何服务代码。简单的说,有了Istio,你的服务就不再需要任何微服务开发框架(典型如Spring Cloud,Dubbo),也不再需要自己手动实现各种复杂的服务..._istio

C# ListView简单示例_c#listview样例-程序员宅基地

文章浏览阅读3.8k次,点赞7次,收藏47次。ListView是用于显示数据的,先在窗体中拉一个lisview控件,还有一些新增、修改、删除、查询按钮和文本框,控件名称为listview,按钮为btnInsert,btnUpate,btnDeleteOne,btnDelete,btnSelect,文本框的名称为txtName,txtSex,txtPhone,txtAddress,设计如下图所示:把listview的View改为Details,添加几项:具体代码using System;using System.Collections.Gene_c#listview样例

hive 编写sql实现每个用户截止到每月为止的最大单月访问次数和累 计到该月的总访问次数_sql题目截止到当月的最大和累计-程序员宅基地

文章浏览阅读2.6k次,点赞3次,收藏11次。1.1 编写sql实现每个用户截止到每月为止的最大单月访问次数和累 计到该月的总访问次数userid,month,visitsA,2015-01,5A,2015-01,15B,2015-01,5A,2015-01,8B,2015-01,25A,2015-01,5A,2015-02,4A,2015-02,6B,2015-02,10B,2015-02,5A,2015-03,16..._sql题目截止到当月的最大和累计