react国际化（三）

1.安装 react-intl-universal 插件

app 为项目根目录

app\assets\locales下创建en.js、cn.js文件

en-US.js

// src/locale/en-US.js
export default {
  personglicon: "personglicon",
  flowpeople: "flowpeople",
  login: {
    loginBtn: "login",
    remember: "remember"
  }
};

cn.js

export default {
  personglicon: "人口管理",
  flowpeople: "境内人口",
  login: {
    loginBtn: "境内人口1",
    remember: "记住密码"
  }
};

  

app\index.js

import intl from "react-intl-universal";
import cn from "./assets/locales/cn";
import en from "./assets/locales/en";

const SUPPOER_LOCALES = [
  {
    name: "English",
    value: "en"
  },
  {
    name: "简体中文",
    value: "cn"
  }
];

const loadLocales = () => {
  let currentLocale = intl.determineLocale({
    urlLocaleKey: "lang",
    cookieLocaleKey: "lang"
  });
  if (!_.find(SUPPOER_LOCALES, { value: currentLocale })) {
    currentLocale = "cn";
  }
  
  <!--  动态切换中英文
     sessionStorage.setItem("lang", "en");
     history.go(0);
  -->
  if (sessionStorage.getItem("lang")) {
    currentLocale = sessionStorage.getItem("lang");
  }
  intl.init({
    currentLocale,
    locales: {
      [currentLocale]: currentLocale == "cn" ? cn : en
    }
  });
  
};

loadLocales();

2.页面使用

import intl from "react-intl-universal";


<span> {intl.get("login.loginBtn")}</span>