React-intl 实现多语言的示例代码
最近在项目中添加了语言国际化的功能。
语言国际化,也有人说成是语言本地化,其实就是为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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 浅谈es6语法 (Proxy和Reflect的对比)
下一篇: 皮肤过敏韭菜能吃吗