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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
jQuery选择器全面总结
Jan 06 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
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防止post重复提交数据的简单例子
2014/06/07 PHP
php修改数组键名的方法示例
2017/04/15 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
python操作MySQL数据库具体方法
2013/10/28 Python
Python解惑之True和False详解
2017/04/24 Python
详解python中asyncio模块
2018/03/03 Python
实时获取Python的print输出流方法
2019/01/07 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
车贷收入证明范本
2014/01/09 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
大足石刻导游词
2015/02/02 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL