react-intl实现多语言国际化

发表于
字数统计 987字 | 阅读时长 4分钟

场景：

多语言支持对于一些国际化的大公司，或者是一些开源社区的文档（比如vue），是一个挺普遍的需求，总感觉自己什么时候也会做到这种需求，最近公司的项目就需要做中英文双语言。

实现：

一般做法有两种，要么做多套，要么就一套里面切换，我司是后者。由于公司项目是基于react技术栈，所以实现方面就借助react-intl这个库，是雅虎的一个开源项目，本文就说下如何在react项目中使用react-intl实现多语言支持。

React intl使用步骤

1. 安装依赖

npm install react-intl --save

2. 使用<IntlProvider>组件

react-intl提供了<IntlProvider>组件，类似于redux中的Provider组件，在根组件使用该组件包裹<App />，子组件就可以读取在<IntlProvider>中引入的locale配置文件的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react'
import ReactDOM from 'react-dom'
import { addLocaleData } from 'react-intl'
import App from './app'
//引入locale配置文件，具体路径根据实际情况填写
import en-US from './translations/en.json'
import zh-CN from './translations/zh.json'
//react-intl自带的配置文件
import enLocaleData from 'react-intl/locale-data/en'
import zhLocaleData from 'react-intl/locale-data/zh'
addLocaleData(enLocaleData) //注册区域设置数据
addLocaleData(zhLocaleData) //注册区域设置数据
ReactDOM.render(    
    <IntlProvider 
        locale={'zh'} 
        messages={zh-CN}
    >
        <App />
    </IntlProvider>,    
    document.getElementById('app')
)

<IntlProvider>需要传递两个参数：

locale是传递需要国际化的语言的缩写，通过这个参数可以确定格式化日期，数字，量词的时候按照哪一种语言的规则，这个是规则是intl提供的，一般浏览器会内置这个库。

messages是用于传递刚刚我们引入的json配置文件的，从示例代码中我们可以看出，首先我们使用Import语句引入了配置文件，然后将配置文件的内容传递给了messages这个参数，此时组件中的所有组件都可以拿到配置文件中的内容了。

当然这两个参数应该是动态设置的，你的网页上可以有个切换语言版本的按钮，根据切换的语言不通设置不通的locale和messages。

3. 在子组件中使用

常见的用法有两种，一种是使用<FormattedMessage>组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
class App extends Component {
  
    render() {
        return (
            <p>
                <FormattedMessage
                    id="welcome"
                />
            </p>
        )
    }
}
export default App

<FormattedMessage>有6个属性，只有一个id是必须的，其他都是可选的

  • id：唯一的标识，对应配置json中的id
  • description： 简单的描述
  • defaultMessage：当id没匹配到，默认显示的内容
  • values：通过values属性可以把React元素传给FormattedMessage组件来支持富文本格式
  • tagName：FormattedMessage组件默认使用span标签，可以通过tagName属性自定义，也可以用另一个React元素来包裹（推荐）
  • children: 可以定义个函数当做FormattedMessage的children属性，函数的参数就是翻译出来后的内容

另一种用法就是通过this.context.intl访问所有的api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react'
import { intlShape } from 'react-intl'
class App extends Component {
  	static contextTypes = {
  		intl: intlShape,
  	}
    render() {
	const formatMessage = this.context.intl.formatMessage
        return (
            <p>
              {formatMessage({ id: 'welcome' })}  
            </p>
        )
    }
}
export default App

之前写的IntlProvider组件会在context中注入intl对象，所以在子组件中可以通过this.context.intl来访问，不过这里需要注意的是，需要定义contextTypes，这是react的要求，不然就访问不到context,最常用的就是formatMessage函数，当然还有其他的formatNumber、formatTime对应转换数字和时间等等。

基本的用法就是这样，本文描述的不全，一些具体的api还须大家自行到官方文档查看。

菜鸟学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。