react网页多语言（react-intl-universal）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/88558830

github项目地址：https://github.com/xutongbao/my-app-intl

参考链接：https://www.npmjs.com/package/react-intl-universal

目录结构：

App.js

import React, { Component } from 'react';
import intl from 'react-intl-universal'
import { withRouter } from "react-router-dom";

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      initDone: false
    }
  }
  render() {
    return (
      <div>
      	<div>{intl.get('login.username')}</div>
      	<div>{intl.get('editor.item.name')}</div>
      	<button onClick={this.handleLanguage.bind(this)}>EN/中</button>
      </div>
    );
  }
}

//生命周期
Object.assign(App.prototype, {
  componentDidMount() {
    let { location } = this.props
    let ps = this.parseQueryString(location.search)
    let currentLocale = ps.language || 'zh-CN'
    intl.init({
      currentLocale: currentLocale,
      commonLocaleDataUrls: {
        'zh': false,
        'en': false
      },
      locales: {
        [currentLocale]: require(`./locales/${currentLocale}`).default
      }
    }).then(() => {
      this.setState({ initDone: true })
    })
  },
  handleLanguage() {
    let { location } = this.props
    let ps = this.parseQueryString(location.search)
    if (ps.language === 'en-US') {
    	this.props.history.push('?language=zh-CN')
    } else if (ps.language === 'zh-CN') {
    	this.props.history.push('?language=en-US')
    } else {
    	this.props.history.push('?language=en-US')
    }
    
    window.location.reload()
  },
  parseQueryString(url) {
    var params = {};
    var arr = url.split("?");
    if (arr.length <= 1) {
      return params;
    }
    arr = arr[1].split("&");
    for (var i = 0, l = arr.length; i < l; i++) {
      var a = arr[i].split("=");
      params[a[0]] = a[1];
    }
    return params;
  }
})


export default withRouter(App);

zh-CH.js

import editor from './zh-CN_Editor.js'
export default ({
  login: {
    "username": "用户名",
  },
  editor: editor
})

zh-CN_Editor.js

export default ({
  item: {
    name: '徐同保'
  }
})

en-US.js

import editor from './en-US_Editor.js'
export default ({
  login: {
    "username": "Username"
  },
  editor: editor 
})

en-US_Editor.js

export default ({
  item: {
    name: 'Xutongbao'
  }
})