react：中英文切换，多语言封装

1.npm install react-intl-universal --save

2.src下创建locales文件夹， 并创建en-US.json和zh-CN.json文件

en-US.json

{
    "language": "English",
    "createDate": "Create Date",
    "action": "Operation",
    "totalPage":"Total {total} Pages"
}

zh-CN.json

{
    "language": "中文",
    "createDate": "创建时间",
    "action": "操作",
    "totalPage":"共 {total} 页"
}

3.app.js入口文件配置

import React, { Component } from 'react'
import routes from './router/config.js'
import RouteView from "./router/index";
import intl from 'react-intl-universal';
import store from "./store/index.js"
const locales = {
  "en": require('./locales/en-US.json'),
  "zh": require('./locales/zh-CN.json'),
};

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      initDone: false,
      loading: false
    }
  }
  componentWillMount() {

    let lang = (navigator.language || navigator.browserLanguage).toLowerCase();
    if (lang.indexOf('zh') >= 0) {
      // 假如浏览器语言是中文
      localStorage.setItem("defaultLng", "zh")
    } else {
      // 假如浏览器语言是其它语言
      localStorage.setItem("defaultLng", "en")
    }
    this.loadLocales();


  }

  loadLocales() {
    intl.init({
      currentLocale: localStorage.getItem('locale') || localStorage.getItem("defaultLng") || 'zh',
      locales,
    })
      .then(() => {
        this.setState({ initDone: true });
      });
  }

  render() {
    return (
      
        this.state.initDone &&
          <RouteView routes={routes}>
          </RouteView>
     
    )
  }

}

4.组件中使用

import React, { Component } from 'react'
import intl from 'react-intl-universal';

export default class Index extends Component {
  render() {
    return (
      <div className='policy-con'>
{intl.get('totalPage', { total: this.state.pag})}
{intl.get('language')}

</div>
    )
  }
}