react项目中的国际化--react-intl-univers
2020-06-12 本文已影响0人
随意_web
这其实应该是一篇使用教程,但是因为一句代码,变成了踩坑......很难受
名词解释
react-intl-universal: is a React internationalization package developed by Alibaba Group.
这里我就不翻译了
使用教程
直接上代码
// 这里是插件的部分
import React, { FC, useState, useEffect } from "react";
import intl from "react-intl-universal";
require("intl/locale-data/jsonp/en.js");
require("intl/locale-data/jsonp/zh.js");
// 国际化语言包,这里是自建的部分
const locales: any = {
"en-us": require("./locales/EN-US.json"),
"zh-cn": require("./locales/ZH-CN.json"),
"zh-tw": require("./locales/ZH-TW.json"),
};
const App: FC = () => {
// 浏览器默认语言
const defaultl: string = navigator.language.toLowerCase() || "";
let defaultLang: string = "";
// 简体中文 这里是赠送部分,因为我需要判断浏览器默认语言,所以整理了一下大概的
if (
defaultl === "zh-cn" ||
defaultl === "zh-chs" ||
defaultl === "zh-chs-cn" ||
defaultl === "zh-hans" ||
defaultl === "zh-hans-cn"
) {
defaultLang = "zh-cn";
// 繁体中文:台湾、香港、澳门
} else if (
defaultl === "zh-tw" ||
defaultl === "zh-hk" ||
defaultl === "zh-mo" ||
defaultl === "zh-cht" ||
defaultl === "zh-cht-cn" ||
defaultl === "zh-hant" ||
defaultl === "zh-hant-cn"
) {
defaultLang = "zh-tw";
// 英文:其他
} else {
defaultLang = "en-us";
}
// state
const [initDone, setinitDone] = useState(false);
const [lang, setlang] = useState(localStorage.getItem("lang") || defaultLang);
useEffect(() => {
// 第一次渲染语言的空白
localStorage.setItem("lang", lang);
}, [lang]);
// 下面是使用插件的部分
useEffect(() => {
loadLocales();
});
onst loadLocales = () => {
let currentLocale = intl.determineLocale({
//这里可以看我后面附的官方参考文档,我是使用localstorage的方式,还有cookies和url配参数的方式
localStorageLocaleKey: "lang",
});
intl
.init({
currentLocale,
locales,
})
.then(() => {
setinitDone(true);
});
};
// 切换语言
const changelang = (newlang: string) => {
if (lang === newlang) return;
setlang(newlang);
};
return (/*这里面就是需要渲染的dom*/)
}
export default App;
这代码上的我有点无聊了,不过基本上就是使用这个插件比较完全的部分了。
那么问题来了
坑在哪里?
现在能实现语言切换的操作了,但是你会发现,总是拿到上一次的语言,然而localstorage里面又是正常的。绞尽脑汁,找到一种不那么好的方式:
const changelang = (newlang: string) => {
if (lang === newlang) return;
setlang(newlang);
window.location.reload(); //添加这一句话
};
强制刷新页面,读取到最新的值,其实注意观察官方文档采用的url传参的方式,个人认为最后的
location.search = `?lang=${lang}`;
这句代码也是让浏览器识别url变化之后强制刷新页面
欢迎指正,欢迎延申