react-intl多语言切换

一.安装

npm install react-intl --save

二.创建需要切换语言的js文件

三.在整个项目的入口函数处引入 react-intl：

app.js配置
1.

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

2.addLocaleData：引入本地的 localedata
IntlProvider：包裹需要翻译的组件，用来传递给子类语言信息
载入本地 localedata 语言数据：

import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';

这个是react-intl内置的语言数据

3.载入之前建立的需翻译国家语言的 js文件：

import zhCN from './language/zh';
import zhHK from './language/hk';
import enUS from './language/en';

4.定义 messages 和locale
messages是render()时IntlProvider组件所传的props，属性名固定
messages返回值为映射表，与浏览器语言对应
messages：传递多国语言JS 内的翻译语句
locale：传递当前的语言是什么语言
根据你的需要设置：

componentWillMount() {
    let self = this;
    if (localStorage.lang) {
      if (localStorage.lang === 'zh') {
        self.setState({
          locale: 'zh',
          messages: zhCN
        });
      } else if(localStorage.lang === 'en'){
        self.setState({
          locale: 'en',
          messages: enUS
        });
      }else{
         self.setState({
          locale: 'zh',
          messages: zhHK
        });
      }
    } else {
      self.setState({
        locale: 'en',
        messages: enUS
      });
    }
}

附上浏览器languages大全：

“af”, “sq”, “ar-SA”, “ar-IQ”, “ar-EG”, “ar-LY”, “ar-DZ”, “ar-MA”, “ar-TN”, “ar-OM”, “ar-YE”, “ar-SY”, “ar-JO”, “ar-LB”, “ar-KW”, “ar-AE”, “ar-BH”, “ar-QA”, “eu”, “bg”, “be”, “ca”, “zh-TW”, “zh-CN”, “zh-HK”, “zh-SG”, “hr”, “cs”, “da”, “nl”, “nl-BE”, “en”, “en-US”, “en-EG”, “en-AU”, “en-GB”, “en-CA”, “en-NZ”, “en-IE”, “en-ZA”, “en-JM”, “en-BZ”, “en-TT”, “et”, “fo”, “fa”, “fi”, “fr”, “fr-BE”, “fr-CA”, “fr-CH”, “fr-LU”,“gd”, “gd-IE”, “de”, “de-CH”, “de-AT”, “de-LU”, “de-LI”, “el”, “he”, “hi”, “hu”,“is”, “id”, “it”, “it-CH”, “ja”, “ko”, “lv”, “lt”, “mk”, “mt”, “no”, “pl”, “pt-BR”, “pt”, “rm”, “ro”, “ro-MO”, “ru”, “ru-MI”, “sz”, “sr”, “sk”, “sl”, “sb”,“es”, “es-AR”, “es-GT”, “es-CR”, “es-PA”, “es-DO”, “es-MX”, “es-VE”, “es-CO”, “es-PE”, “es-EC”, “es-CL”, “es-UY”, “es-PY”, “es-BO”, “es-SV”, “es-HN”, “es-NI”,“es-PR”, “sx”, “sv”, “sv-FI”, “th”, “ts”, “tn”, “tr”, “uk”, “ur”, “ve”, “vi”, “xh”,“ji”, “zu”

5.载入语言数据

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

6.IntlProvider包裹需要翻译的组件

render() {
    return (
      <IntlProvider locale={this.state.locale} messages={this.state.messages}>
          <Router history={history}>
            <Root />
          </Router>
      </IntlProvider>
    );
}

app.js 入口文件的全部配置

import React, { Component } from 'react';
import {Router} from 'react-router-dom'
import Root from './root';
import zhCN from './language/zh';
import zhHK from './language/hk';
import enUS from './language/en';
import { IntlProvider, addLocaleData } from 'react-intl';
import createHistory from "history/createHashHistory";

import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
addLocaleData([...en, ...zh]);

const history = createHistory();

class App extends Component {
componentWillMount() {
    let self = this;
    if (localStorage.lang) {
      if (localStorage.lang === 'zh') {
        self.setState({
          locale: 'zh',
          messages: zhCN
        });
      } else if(localStorage.lang === 'en'){
        self.setState({
          locale: 'en',
          messages: enUS
        });
      }else{
         self.setState({
          locale: 'zh',
          messages: zhHK
        });
      }
    } else {
      self.setState({
        locale: 'en',
        messages: enUS
      });
    }
}
render() {
    return (
      <IntlProvider locale={this.state.locale} messages={this.state.messages}>
          <Router history={history}>
            <Root />
          </Router>
      </IntlProvider>
    );
}
}
export default App;

四.在需要翻译的组件中引入

import { injectIntl } from "react-intl";
import { withRouter } from "react-router-dom";
class Instructions extends React.Component {

}
Instructions = withRouter(injectIntl(Instructions));
export default Instructions;

使用

		const { intl } = this.props;	    
	    let cart1 = intl.formatMessage({ id: "cart.cart1" });
	    使用时一般用大括号包裹{cart1}

https://www.npmjs.com/package/react-intl