React-intl 實現多語言

前言

React 作國際化，我推薦使用 React-intl , 這個庫提供了 React 組件和Api兩種方式來格式化日期，數字和字符串等。知道這個庫了，那讓咱們開始使用它

組件用法

爲了和React 比較融和，咱們能夠使用組件的方式

1.安裝

npm install react-intl --save

2.添加引用

import {IntlProvider, addLocaleData} from 'react-intl';

3.添加 locale 配置文件

zh-CN.js

const zh_CN = {
     'intl.hello': "你好",
     'intl.name': '個人名字是 {name}'
  }
export default zh_CN;

en-US.js

const en_US = {
     'intl.hello': "hello",
     'intl.name': 'my name is {name}'
 }    
 export default en_US;

4.使用<IntlProvider />

這個組件用於設置 i18n 的上下文，它將包裝應用程序的根組件，以便整個應用程序將配置在 i18n 的上下文中.
最主要的兩個配置項是： loacle 當前的語言環境 messages 當前語言的內容。
咱們要動態切換語言，須要動態改這兩個配置。

import zhCN from './locale/zh.js';    //導入 i18n 配置文件
import enUS from './locale/en.js';

addLocaleData([...en, ...zh]);

export default class Root extends Component {
    static propTypes = {
        store: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    }

    render() {
        const { store , history } = this.props;
        return (
            <IntlProvider locale='zh' messages={zhCN}>
                <Provider store={store}>
                    <Router history={history}>
                    </Router>
                </Provider>
            </IntlProvider>
        )
    }
}

5.使用<FormattedMessage />

基礎用法

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={'hello'}
/>

若是當前語言環境是 中文，它會顯示你好 ，若是是英文環境，會顯示Hello.

動態傳值

<FormattedMessage
    id="intl.name"
    values={{name: <b>{name}</b>}}
/>

咱們定義 intl.name 的時候模板裏用到了{name} ,這個表明咱們能夠動態傳值，咱們能夠經過FormattedMessage中的 values 屬性傳一個JSON對象，這是就會動態顯示咱們的內容了。

6.其它組件用法

Ract-intl 爲咱們提供了豐富的組件，能夠幫咱們很好的處理字符串，時間，日期 ，你們能夠本身查看 API，若有不明白的地方，我能夠留言。

API用法

有時候咱們可能須要在代碼中動態作 國際化，這就須要動態API 了。下面我簡單介紹下怎麼用

1.導入 injectIntl

import { injectIntl, FormattedMessage } from 'react-intl';

2.在組件中注入

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

我在項目中用到了Redux，注入的時候應該向上面那樣，若是你沒有用Redux ，只須要 export defuault injectIntl(App)

3.使用 intl 對象

咱們經過第二步的注入，如今在咱們在 組件的 props 上會獲得一個 intl 對象，它提供的方法和我們上邊介紹的組件基本相對應，這時候咱們想要顯示字符串，能夠使用formatMessage 方法：

const {intl} = this.props;
　　
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

formatMessage的第一個參數能夠傳入Id， 第二個參數傳入 values ，更詳細的瞭解，請查看 API

結束語

教程的代碼，我已放到github 上，你們若是須要，自行查看 React-intl