html设置时间选择器的字体,关于Antd 时间选择组件文字转换为中文（国际化设置）...

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 的国际化方案