React项目中使用React-intl实现多语言支持

在React项目中使用React-intl实现多语言支持

在项目开发的过程中，如果项目需要国际化，包含中文版和英文版，按理说逐字逐句替换也不是不可以，但是这种做法很low，并且对于国际化来说，不光是替换文字这么简单，而是要符合英文本土国家的语言习惯等等，例如数字的显示（中文：1,0000；英文：10,000），以及时间，量词（单复数）和语言习惯等等的显示方式，官方推荐在使用React-intl的时候使用组件

1.组件

<IntlProvider />：用法类似于,包裹在需要国际化语言的组件的最外层，提供locale（中文：zh）与message属性（中文：zh_CN）

<FormattedDate />：日期组件，将时间戳格式化为不同语言的日期

var date = new Date().getTime()
<FornattedDate value={date}/> 

<FormattedTime />：时间组件，用来格式化时间的，例如（12：00 AM）

<FormattedRelative />：用来显示当前时间与传入时间的关系，例如（10 minutes ago）

<FormattedNumber />：显示不同语言下的数字

<FormattedPlural />：格式化量词

<FormattedMessage />：格式化字符串，可以代替界面上的任何字符串，使用的频率是最高的

2.在react项目中使用

2.1 功能描述

在首页中包含三个组件，一个是header组件，一个是sliderMenu组件，想要通过header中的select选择器选择对应的语言，再来改变侧边栏UI中的语言，涉及到的点就是父组件与子组件之间相互传值，并且需要用IntlProvider组件将sliderMenu包裹起来

2.2安装React-intl 模块

npm i React-intl -S

组件的用法

首先例如配置文件中的写法为

// zh配置文件中
const app = {
    app.home: '首页'
}
export default app

// en配置文件中
const app = {
    app.home: 'HOME'
}
export default app
// 使用，不管是在中文环境还是英文环境
// 以下的属性中 id表示这个字符串在配置文件中的key值，description表示的是对这个位置替代文字的描述，不会影响输出，只是为了方便我们维护代码，defaultMessage表示的是替代的值，如果在配置文件中没有找到这个id，则输出这个默认的值
<FormattedMessage  id={app.home} description='这里是首页' defaultMessage="首页"/>

2.3 创建locale配置文件

src/locale，这里创建中英文两个版本，而且只涉及到侧边栏的语言国际化

2.4父子组件传递语言环境locale值

header子组件给父组件传值

父组件给sliderMenu组件传值，子组件中使用this.props.name接收，使用sliderMenu将menu包裹起来

//sliderMenu组件中,引入以下爱的模块和组件
import zh_CN from './../../locales/zh/app';// 中文配置文件
import en_US from './../../locales/en/app';// 英文配置文件
import { IntlProvider, FormattedMessage } from 'react-intl';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import enUS from 'antd/lib/locale-provider/en_US';

// IntlProvider中的getMessage方法，传过来的是一个字符串，使用switch case返回响应的对象
getMessage = (message) => {
    console.log(message)
    let returnMsg;
    switch (message) {
        case "zh_CN":
            returnMsg = zh_CN;
            break;
        case "en_US":
            returnMsg = en_US;
            break;
        default:
            return returnMsg
    }
    return returnMsg;
}

// FormattedMessage要使用在被IntlProvider包裹的内部，我们这里只要包裹每一个mebu.item的文字就可以了

2.5最终效果