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中我都会放一个经过实践是可用的例子

  • <IntlProvider />
    包裹在需要语言国际化的组建的最外层,为包含在其中的所有组建提供包含id和字符串的键值对
    (如: "homepage.title":"Hommily"; )
  • <FormattedDate />
    用于格式化日期,能够将一个时间戳格式化成不同语言中的日期格式。
    传入时间戳作为参数:
<FormattedDate 
    value={new Date(1459832991883)}
/>

输出结果:

<span>4/5/2016</span>
  • <FormattedTime />
    用于格式化时间,效果与<FormattedDate />相似
    传入时间戳作为参数:
<FormattedTime 
    value={new Date(1459832991883)}
/> 

输出结果:

<span>1:09 AM</span>
  • <FormattedRelative />
    通过这个组件可以显示传入组件的某个时间戳和当前时间的关系,比如 “ 10 minutes ago"
    传入时间戳作为参数:
<FormattedRelative 
    value={Date.now()}
/>

输出结果:

<span>now</span>

10秒之后的输出结果:

<span>10 seconds ago</span>

1分钟之后的输出结果:

<span>1 minute ago</span>
  • <FormattedNumber />
    这个组件最主要的用途是用来给一串数字标逗号,比如10000这个数字,在中文的语言环境中应该是1,0000,是每隔4位加一个逗号,而在英语的环境中是10,000,每隔3位加一个逗号。
    传入数字作为参数:
<FormattedNumber value={1000} />

输出结果:

<span>1,000</span>
  • <FormattedPlural />
    这个组件可用于格式化量词,实际上可以传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了所有的情况
<FormattedPlural 
    value={10} 
    one='message' 
    other='messages'
/>

输出结果:

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

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

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

使用这个组件的时候,我们这么写:

<FormattedMessage 
    id='app.greeting' 
    description='say hello to Howard' 
    defaultMessage='Hello, Howard!' 
/>

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

<span>Hello, Howard!</span>
  • <FormattedHTMLMessage />
    这个组件的用法和<FormattedMessage />完全相同,唯一的不同就是输出的字符串可以包含HTML标签,但是官方不太推荐使用这个方法,如果可以想办法用<FormattedMessage />的话,就不应该使用这个组件
  • 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 (            
            <p>                
                <FormattedMessage                    
                    id="welcome"                    
                    defaultMessage={`Hello {name}, you have {unreadCount, number} 
                        {unreadCount, plural,                      
                        one {message}                      
                        other {messages}                    
                    }`}                    
                    values={{name: <b>{name}</b>, unreadCount}} 
                />            
            </p>        
        );    
    }
}
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(    
    <IntlProvider locale="en">        
        <Dialog />    
    </IntlProvider>,    
    document.getElementById('content')
);
执行结果.png

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

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 11,922评论 7 109
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,391评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 15,891评论 31 98
  • 01 校园暴力早已不是新闻,前段时间才爆出数起女生宿舍凌辱事件,12月5日在湖南电子科技职业学院又发生了一起大一新...
    汉尼拔丝苹果9阅读 206评论 3 3
  • 又是一场连绵不断的秋雨,也不知道下了多少天了,屋内的香水百合散发着浓郁的香,花朵肆意地绽放,似乎这个世界从来没有忧...
    给你的承诺阅读 1,471评论 0 6