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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 用多个类别来进行微调
- Asp.Net4.0/VS2010新变化(2):网站自动预热
- Asp.Net4.0/VS2010新变化(1):web.config与publish
- 任天堂将推出Nintendo Labo 域名保护意识墙
- 表格效果
- ROR学习笔记(2):Asp.Net开发者看ROR
- 图片的javascript延时加载
- 全世界最短IE判定if(!+[1,])的解释
- Log4Net与Log2Console配合时中文问题的解决
- 如何改变AspNetPager当前页码的默认红色?
- Flash/Flex学习笔记(48):反向运动学(下)
- 如何给sublime text3安装汉化包?so easy 哦
- Flash/Flex学习笔记(47):反向运动学(上)
- 汉诺塔问题算法介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac免密码登录linux服务器
- 目标检测算法YOLO-V2详解
- 神经网络架构搜索——可微分搜索(Noisy DARTS)
- 教你使用 Jacoco 统计服务端代码覆盖率
- 如何在树莓派4B上设置EMQX开机自启动
- 如何使用 Ktor 快速开发 Web 项目
- 神经网络架构搜索——二值可微分搜索(BATS)
- UEFI 原理与编程 1 - UEFI开发环境EDK2搭建
- 【Unity】瞎做个宝石迷阵吧!(1)——构建场景
- VUE组件传值案例讲解
- 【JAVA】来写个JAVA的HelloWorld吧!
- 如何发布自己的项目到Maven中央仓库?
- 《闲扯Redis八》Redis字典的哈希表执行Rehash过程分析
- 为什么说在Android中请求权限从来都不是一件简单的事情?
- 小知识:如何赋予用户查看所有存储过程和触发器的权限