react国际化初探

react的国际化有两个库，一个是react-intl，另一个是react-intl-universal，本文介绍的是react-intl-universal(我觉得非常好用，比react-intl好用)。

安装

npm install react-intl-universal --save

基本使用

我们将需要国际化的东西以键值对的形式分别写入不同的配置文件中。然后再入口文件处进行intl的初始化。

import React from 'react';
import ReactDOM from 'react-dom';
import intl from 'react-intl-universal';
import App from './App';
import zh from './i18n/zh.js'
import en from './i18n/en.js'

let lang = (navigator.languages && navigator.languages[0]) || navigator.language
intl.init({
  currentLocale: lang.split('-')[0],
  locales: {
    zh,
    en
  }
})
ReactDOM.render(<App />,document.getElementById('root'));

之后就可以在需要国际化的组件中使用intl的API进行国际化了。

• 翻译文本

// zh.js
{'MSG':'你好世界'}
// 组件中
<p>{intl.get('MSG')}</p>

• 翻译html

// zh.js
{ 'B.HTML':'<b>我是b标签<b>'}
// 组件中
<p>{intl.getHTML('B.HTML')}</p>

• 翻译数字

// zh.js
{ 'PRICE.FORMAT':'{price,number,CNY}'}  //price为变量，number为变量类型，CNY为格式。
// 组件中
<p>{intl.get('PRICE.FORMAT',{price:13434355})}</p>

• 翻译日期

// zh.js
{ 'DATE.FORMAT':'{date,date,short}'}
// 组件中
<p>{intl.get('DATE.FORMAT',{date:new Date('2015-9-23')})}</p>

demo效果截图：

zh
en

按钮可实现中英文的互相切换。

参考资料

react-intl-universal
demo源码
上述demo的源码以放在GitHub，有需要的可以看看。
另外还有一篇文章介绍vue国际化的，点这里