Webpack+React+多语言(二) 多语言组件

基础配置Webpack+React+多语言(一) 基础配置
github地址
完整代码：webpack-react-language
多语言组件webpack-react-language
关键字：react 多语言 国际版 React-intl

现在项目基本能跑起来了，我们开始准备多语言部分

---

打开调试器，会看到下面这句话，推荐你安装React DevTools

"Download the React DevTools for a better development experience: https://fb.me/react-devtools"

推荐安装React DevTools.png

如果你可以打开chrome商店，搜索到React Developer Tools就可以直接点击下载安装

• 1.项目中添加了语言国际化的功能

一开始的时候，我考虑的是为整个项目添加config文件，根据不同的语言和地区，加载不同的config文件，就能够达到界面语言切换的目的。(我们的pc端多语言就是这么做的，两个不同的配置文件，根据当前页面的语言，加载合适的文件)

但是语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言，还包括了：

• 日期&时间显示

• 数字显示（英文环境下每隔3位一个逗号：1,000）
• 量词的显示（一个苹果是apple，两个苹果就应该是apples）
• 甚至还有一个字符串中间插了一个变量的情况（"今天午饭吃了{count}个鸡腿"）
• ...

React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。

React-intl提供了两种使用方法

• 一种是引用React组建

• 另一种是直接调取API
  官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。

• 2.下面先来介绍React-intl提供的React组件，有如下几种：

以下几种，在github中我都会放一个经过实践是可用的例子

• 
  包裹在需要语言国际化的组建的最外层，为包含在其中的所有组建提供包含id和字符串的键值对
  （如： "homepage.title":"Hommily"; ）
• 
  用于格式化日期，能够将一个时间戳格式化成不同语言中的日期格式。
  传入时间戳作为参数：

输出结果：

4/5/2016

• 
  用于格式化时间，效果与相似
  传入时间戳作为参数：

输出结果：

1:09 AM

• 
  通过这个组件可以显示传入组件的某个时间戳和当前时间的关系，比如 “ 10 minutes ago"
  传入时间戳作为参数：

输出结果：

now

10秒之后的输出结果：

10 seconds ago

1分钟之后的输出结果：

1 minute ago

• 
  这个组件最主要的用途是用来给一串数字标逗号，比如10000这个数字，在中文的语言环境中应该是1,0000，是每隔4位加一个逗号，而在英语的环境中是10,000，每隔3位加一个逗号。
  传入数字作为参数：

输出结果：

1,000

• 
  这个组件可用于格式化量词，实际上可以传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了所有的情况

输出结果：

messages

• 
  这个组件用于格式化字符串，是所有的组件中使用频率最高的组件，因为基本上，UI上面的每一个字符串都应该用这个组件替代

比如我们在locale配置文件中写了如下内容：

const app = { 
    greeting:'Hello Howard!",
}
export default app;

使用这个组件的时候，我们这么写：

id指代的是这个字符串在locale配置文件中的属性名
description指的是对于这个位置替代的字符串的描述，便于维护代码，不写的话也不会影响输出的结果
当在locale配置文件中没有找到这个id的时候，输出的结果就是defaultMessage的值
输出的结果：

Hello, Howard!

• 
  这个组件的用法和完全相同，唯一的不同就是输出的字符串可以包含HTML标签，但是官方不太推荐使用这个方法，如果可以想办法用的话，就不应该使用这个组件

• 3.安装react-intl

注意：为了兼容Safari各个版本，需要同时安装 intl，intl在大部分的『现代』浏览器中是默认自带的，但是Safari和IE11以下的版本就没有了，这里需要留个心眼。
雅虎React-intl项目地址

npm install react-intl --save-dev
npm install intl --save-dev

在Dialog组件中

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
class Dialog extends Component {    
    constructor(props) {        
        super(props);        
        this.state = {            
            name       : 'W.mf',            
            unreadCount: 1000,        
        };    
    }    
    render() {        
        const {name, unreadCount} = this.state;        
        return (            
            
                
                {name}, unreadCount}} 
                />            
            
        
        );    
    }
}
export default Dialog;

wap/main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider} from 'react-intl';
import Dialog from './components/Dialog.jsx';
ReactDOM.render(    
            
        
    
    ,    
    document.getElementById('content')
);

执行结果.png

基础配置Webpack+React+多语言(一) 基础配置
github地址 ：webpack-react-language
关键字：react 多语言 国际版 React-intl