• react网页多语言(react-intl-universal)


    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'
      }
    })
  • 相关阅读:
    与众不同 LibreOJ
    清点人数 LibreOJ
    数星星 Stars LibreOJ
    树状数组 1 :单点修改,区间查询 Gym
    DDL与DML
    605. 种花问题
    Minimum Spanning Tree Gym
    最小生成树动态演示
    ssm框架添加分页
    ssm框架下的文件自动生成模板(简单方便)
  • 原文地址:https://www.cnblogs.com/xutongbao/p/11915713.html
Copyright © 2020-2023  润新知