支持多语言基于react-i18next开发

最新推荐文章于 2024-08-12 07:15:40 发布

zuo_zuo_blog

最新推荐文章于 2024-08-12 07:15:40 发布

阅读量758

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/106642938

版权

React 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、搭建 React 项目

npm create-react-app demo

二、安装 react-i18next

npm install i18next react-i18next --save

三、语言代码表

四、参考

五、JS实现通过判断浏览器语言而自动切换语言

var lang;
!function () {
    lang = navigator.language || navigator.userLanguage;//常规浏览器语言和IE浏览器
    lang = lang.substr(0, 2);//截取lang前2位字符
}();
if (lang === 'zh') {
    finalTrans = zh;
} else if (lang === 'es') {
    finalTrans = es;
} else {
    finalTrans = en;
}

在这里插入图片描述

zh-CN/
	- common.json  #共用模块的文案
在 src/i18n.js 中添加该语言的配置。
import commonCN from './locales/zh-CN/common.json';
// 在 resources 对象中添加属性，属性名为语言代码
const resources = {
  'zh-CN': {
    common: commonCN,
  }
};
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200609151939580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p1b196dW9fYmxvZw==,size_16,color_FFFFFF,t_70)