前端使用react-intl-universal进行国际化

一、国际化 / i18n

目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。

“国际化”的简称：i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）

二、react项目国际化

react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。这种方法引入了两个主要问题：
一：只能应用于视图层，例如React.Component。对于Vanilla JS文件（原生JS），无法对其进行国际化。
二：要获取React.Component的实例，react-intl不能使用常规方法如this.refs.comname

相比之下，react-intl-universal具有以下特征：

react-intl-universal不仅可以在React.Component中使用，还可以在Vanilla JS中使用
简单。只有三个主要的API和一个可选的帮助器。
显示不同语言环境的数字，货币，日期和时间。
多元化字符串中的标签。
消息中的支持变量。
在消息中支持HTML。
支持150多种语言。
在浏览器和Node.js中运行。
消息格式由ICU标准严格执行。
支持嵌套JSON格式的语言环境数据。

三、具体实现

1. 安装

cnpm install react-intl-universal --save

2. App.js文件

本地语言文件

en-US.json

{"tableTitle": "Results","searchBoardTitle": "filter","ReportNumber": "Report Number"
}

zh-CN.json

{"tableTitle": "列表","searchBoardTitle":"查询","ReportNumber": "报案号"
}

引入ant组件、加载语言环境数据

import { ConfigProvider } from 'antd';
import { emit } from './emit.js'
import zh_CN from 'antd/es/locale/zh_CN';
import en_US from 'antd/es/locale/en_US';
import intl from 'react-intl-universal';
const locales = {'en-US': require('./locales/en-US.json'),'zh-CN': require('./locales/zh-CN.json'),
};
...

初始化语言

class App extends React.PureComponent {constructor(props) {super(props);this.state = {antdLang: zh_CN,  // 修改antd  组件的国际化}}async componentWillMount(){const { userStore, history } = this.props;emit.on('change_language', lang => this.loadLocales(lang)); // 监听语言改变事件this.loadLocales(); // 初始化语言}loadLocales(lang = 'en-US') {intl.init({currentLocale: lang,  // 设置初始语言locales,}).then(() => {this.setState({antdLang: lang === 'zh-CN' ? zh_CN : en_US});});}
...

加入antd的LocaleProvider 组件：该组件接受一个属性 locale，该属性为当前语言的文案。antd 会通过 react 的 context 将这些信息传递给被 LocaleProvider 包裹的子组件，

  render() {return (<ConfigProvider locale={this.state.antdLang}> <div className={styles.App}><PolestarApp><Header /><Suspense fallback={<div></div>}><Switch><Route path='/' exact component={Home} /></Switch></Suspense></PolestarApp></div></ConfigProvider>)}

3. emit.js文件

通过events实现事件监听，即在header切换语言时（发送消息），把切换事件传递到App.js中（接收消息）

const EventEmitter = require('events').EventEmitter;
const emit = new EventEmitter();
export { emit };

4. header中增加语言切换

import React from 'react';
import styles from './header.module.css';
import { Select } from 'antd';
import { emit } from '../../emit.js'function Header() {const handleChange =(val) => {// 发送消息emit.emit('change_language', val);}return (<div className={styles.header_container}><p className={styles.header_name}></p><Select defaultValue="English" onChange={handleChange}><Option value="en-US">English</Option><Option value="zh-CN">中文</Option></Select></div>)
}export default Header;

5.国际化

1. 业务组件的国际化

以claimsManage.js为例：

import intl from 'react-intl-universal'; // 引入

原先写死的部分改成intl.get(key)

2.单独抽取出的js文件的国际化

如果直接在js文件中引入react-intl-universal并使用intl.get(label)，传递给searchBoard组件的label为空，需要将原先导出对象，改写成一个function，这样就可以在locales的国际化初始化完成的后，再生成新的配置对象，改写后内容如下：

import intl from 'react-intl-universal';const SearchFormSetting =  () => ({lineNum: 4,data: [{type: 'TextField',initialValue: '',label: intl.get('ReportNumber'),key: 'claimId',},{type: 'DatePickerField',initialValue: '',label: intl.get('ReportStartTime'),longLabel: true,key: 'reportStartTime'},{type: 'DatePickerField',initialValue: '',longLabel: true,label: intl.get('ReportEndTime'),key: 'reportEndTime'},]}
)
export default SearchFormSetting

3.其他

1）带变量的消息

get方法的第二个参数中的变量name、where将会被替换成字符串

组件：

<p>{intl.get('HELLO', { name: 'Tony',where:intl.get('where') }) }</p>

en-US.json

 "where": "Hangzhou",
"HELLO": "Hello {name}，welcome to {where}!"

zh-CN.json

"where": "杭州","HELLO": "你好 {name}，欢迎来到{where}！"

2）数字：复数形式和千分符

组件：

<p>{intl.get('CHANCE', { num: 0 })}</p>
<p>{intl.get('CHANCE', { num: 1 })}</p>
<p>{intl.get('CHANCE', { num: 10000000 })}</p>

en-US.json

"CHANCE": "rest chances：{num, plural, =0 {none.} =1 {one chance.} other {# chances.}}"

zh-CN.json

"CHANCE": "剩余次数为{num, plural, =0 {零。} =1 {1次。} other {# 次.}}"

3）显示货币

语言环境数据采用ICU格式。
语法为{名称，类型，格式}。
在如下示例中：
price是消息中的变量名称
类型有number，date，和time。
format是可选的，如果format是货币代码之一，它将以相应的货币格式显示。
如果type为number和format省略，则结果为带千分符的格式化数字。

组件：

{intl.get('SALE_PRICE', { price: 123456.78 })}

en-US.json

"SALE_PRICE": "The price is {price, number, USD}"

zh-CN.json

"SALE_PRICE": "价格是 {price, number, CNY}"

货币代码对照表

4）显示日期

type为date，则format具short、medium、long、full四个值，不同type对日期描述的详尽程度也不同，不穿默认为short

组件：

{intl.get('SALE_START', { start: new Date() })}
{intl.get('SALE_END', { end: new Date() })}

en-US.json

"SALE_START": "Sale begins from {start, date}",
"SALE_END": " to {end, date, long}"

zh-CN.json

"SALE_START": "活动从{start, date}开始，",
"SALE_END": "{end, date, long}结束"

type - short

type - meduim（英：月份简写）

type - long（英：月份全称）

type - full（具体到星期）

5）设置默认值

组件：

class Locale extends React.Component {render() {const name = 'Tony';return (<div>{intl.get('HELLO', { name }).defaultMessage(`Hello, ${name}`)}</div>);}
}

en-US.json

 "HELLO": "Hello, {name}"

zh-CN.json

"HELLO": "你好, {name}"

6）返回HTML

组件：

{intl.getHTML('TIP')}

en-US.json

"TIP": "This is <span style='color:red'>SPAN</span>"

zh-CN.json

"TIP": "<span style='color:red'>span元素</span>"

前端使用react-intl-universal进行国际化相关推荐

【华为云技术分享】三大前端技术(React,Vue,Angular)探密（下）
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
[react] React Intl是什么原理？
[react] React Intl是什么原理? 实现原理和react-redux的实现原理类似,最外层包一个Provider,利用getChildContext,将intlConfigPropTyp ...
[react] 你有使用过React Intl吗？
[react] 你有使用过React Intl吗? 一种react国际化的解决方案个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
【华为云技术分享】三大前端技术(React,Vue,Angular)探密（上）
[引言] 前段时间写过一篇关于前端技术的概括性文章<前端技术的选择]>(http://3ms.huawei.com/km/blogs/details/7971337),本文就对于当下顶级的 ...
前端（react）上传到阿里云OSS存储实例
需求背景由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述安装原本 ...
前端面试 React篇（上）
一.组件基础 1. React 事件机制 <div onClick={this.handleClick.bind(this)}>点我</div> React并不是将click事 ...
合肥千峰前端培训---React写后台管理注意点（使用AntDesign）
基础姿势要过一遍吗?请点这里! react常用的ui组件库 pc antdesign 移动 antdesignMobile 蚂蚁金服快速上手 cnpm i antd redux redux-thun ...
【前端】react and redux教程学习实践，浅显易懂的实践学习方法。
前言前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
python网页前端和react有什么区别_Vue与React两个框架的粗略区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

前端使用react-intl-universal进行国际化

一、国际化 / i18n

二、react项目国际化

三、具体实现

1. 安装

2. App.js文件

本地语言文件

引入ant组件、加载语言环境数据

初始化语言

加入antd的LocaleProvider 组件：该组件接受一个属性 locale，该属性为当前语言的文案。antd 会通过 react 的 context 将这些信息传递给被 LocaleProvider 包裹的子组件，

3. emit.js文件

4. header中增加语言切换

5.国际化

1. 业务组件的国际化

2.单独抽取出的js文件的国际化

3.其他

1）带变量的消息

2）数字：复数形式和千分符

3）显示货币

4）显示日期

type - short

type - meduim（英：月份简写）

type - long（英：月份全称）

type - full（具体到星期）

5）设置默认值

6）返回HTML

前端使用react-intl-universal进行国际化相关推荐

最新文章

热门文章