React-intl 实现多语言的示例代码


Posted in Javascript onNovember 03, 2017

最近在项目中添加了语言国际化的功能。

语言国际化,也有人说成是语言本地化,其实就是为Web App添加多语言,我们的项目当前包含了中文版和英文版,按理来说『逐字替换』也不是多大事儿,但是,这么Low的做法,有钱途吗?

一开始的时候,我考虑的是传统的为整个项目添加config文件,根据不同的语言和地区,加载不同的config文件,就能够达到界面语言切换的目的。当然,也正是因为这个想法太过于幼稚,所以才被称为『一开始』的想法。语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言,还包括了日期&时间显示,数字显示(英文环境下每隔3位一个逗号:1,000),量词的显示(一个苹果是apple,两个苹果就应该是apples),甚至还有一个字符串中间插了一个变量的情况("今天午饭吃了{count}个鸡腿")...

所以这并不只是一个简单的字符替换问题,并且,我们要很方便的导出一个目录,放到word或者page当中,给到其他同事对照着进行翻译工作,这个非常重要!!难道你要让产品经理直接在代码里改么?或者你想一个一个搜索替换?不考虑清楚就干的话,相信我,You'll pay for this。

作为一个有追求的代码家,你肯定不希望在index.html当中增加一行<Script>引用吧?另外,UI中的文字全部都是使用图片的那个同学,请起立,滚。如果想要在一个React项目中,优雅的import something from somewhere,然后将界面中的文字用<首字母大写 /> 组件替代,最后通过简单的配置实现语言的国际化,那我们就用React-intl吧。

React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它

组件用法

为了和React 比较融和,我们可以使用组件的方式

1.安装

npm install react-intl --save

2.添加引用

import {IntlProvider, addLocaleData} from 'react-intl';

3.添加 locale 配置文件

zh-CN.js

const zh_CN = { 'intl.hello': "你好", 'intl.name': '我的名字是 {name}' } export default zh_CN;

en-US.js

const en_US = { 'intl.hello': "hello", 'intl.name': 'my name is {name}' } export default en_US;

4.使用<IntlProvider />

这个组件用于设置 i18n 的上下文,它将包装应用程序的根组件,以便整个应用程序将配置在 i18n 的上下文中.
最主要的两个配置项是: loacle 当前的语言环境 messages 当前语言的内容。

我们要动态切换语言,需要动态改这两个配置。

import zhCN from './locale/zh.js';  //导入 i18n 配置文件
import enUS from './locale/en.js';

addLocaleData([...en, ...zh]);

export default class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { store , history } = this.props;
    return (
      <IntlProvider locale='zh' messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5.使用<FormattedMessage />

基础用法

<FormattedMessage 
id="intl.hello"

defaultMessage={'hello'}
/>

如果当前语言环境是 中文,它会显示你好 ,如果是英文环境,会显示Hello.

动态传值

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

我们定义 intl.name 的时候模板里用到了{name} ,这个代表我们可以动态传值,我们可以通过FormattedMessage中的 values 属性传一个JSON对象,这是就会动态显示我们的内容了。

6.其它组件用法

Ract-intl 为我们提供了丰富的组件,可以帮我们很好的处理字符串,时间,日期 ,大家可以自己查看 API,如有不明白的地方,我可以留言。

API用法

有时候我们可能需要在代码中动态做 国际化,这就需要动态API 了。下面我简单介绍下怎么用

1.导入 injectIntl

import { injectIntl, FormattedMessage } from 'react-intl';

2.在组件中注入

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

我在项目中用到了Redux,注入的时候应该向上面那样,如果你没有用Redux ,只需要 export defuault injectIntl(App)

3.使用 intl 对象

我们通过第二步的注入,现在在我们在 组件的 props 上会得到一个 intl 对象,它提供的方法和咱们上边介绍的组件基本相对应,这时候我们想要显示字符串,可以使用formatMessage 方法:

const {intl} = this.props;

let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

formatMessage的第一个参数可以传入Id, 第二个参数传入 values ,更详细的了解,请查看API

结束语

教程的代码,我已放到github 上,大家如果需要,自行查看 React-intl

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 #Javascript
微信小程序实现图片放大预览功能
Oct 22 #Javascript
You might like
php 接口类与抽象类的实际作用
2009/11/26 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
详解Python 解压缩文件
2019/04/09 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
创先争优活动承诺书
2014/08/30 职场文书
田径运动会通讯稿
2014/09/13 职场文书
成品仓管员岗位职责
2015/04/01 职场文书