前端开发中不同语言【react-i18next】

目录

查看并设置语言

[单页面:html lang](#单页面:html lang)

​编辑

浏览器

自定义翻译:react-i18next

设置

模块:staticData.ts

散(重复利用):命名空间.json

应用

准备

html标签


查看并设置语言

单页面:html lang

  • 英语: <html lang="en">
  • 中文: <html lang="zh"><html lang="zh-CN">

"CN" 则表示该语言的特定区域,即中华人民共和国(China)。

更符合语言标准的规范

  • 西班牙语: <html lang="es">
  • 法语: <html lang="fr">
  • 日语: <html lang="ja">

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Webpage Title</title>
</head>
<body>
    <!-- Your webpage content goes here -->
</body>
</html>

浏览器

自定义翻译:react-i18next

设置

模块:staticData.ts

TypeScript 复制代码
export function getFeatures(lang: string){
  if(lang==='cn'){
    return [
      {
        title: '免费',
        description:  [
          '你好',
           ...
        ],
      },
      {
       ...
      }
    ]
  }else{
    return [
      {
        title: 'Free',
        description: [
          'hi~~~😄',
           ....
        ],
      },
      {
       ....
        ],
      }
    ]
  }

}

散(重复利用):命名空间.json

应用

  • t (translate) 函数: 这个函数用于翻译文本。

  • i18n 对象: 这是一个包含有关国际化设置的对象,其中包括当前语言环境等信息。

语言环境的判断和切换通常是由 i18n 对象处理的。

i18n.language 的默认值通常由 i18next 库的**language 配置项**决定。

在没有明确设置 language 配置项的情况下,i18next 会尝试根据浏览器的语言首选项(navigator.language)来设置默认语言

i18n.language; // 当前语言环境

i18n.changeLanguage('en'); // 切换到英语​​​​​​​

准备

javascript 复制代码
import { useTranslation } from 'react-i18next';
import { getFeatures } from './staticData';

export default function HomeContent() {
  const { t, i18n } = useTranslation(['home', 'login']);
  const features = getFeatures(['zh', 'zh-CN', 'cn'].includes(i18n.language) ? 'cn' : 'en')

html标签

html 复制代码
<h1 className="font-bold text-2xl">{t('Sign in/Sign up')}</h1>
{features?.map((item, index) => (
          <div className='flex flex-col items-center p-4 md:w-1/2' key={item.title}>
            <div className=' min-w-full h-full bg-[#2A2935] rounded-lg p-4'>
              <div className=' text-2xl leading-loose md:leading-tight'>{item.title}
                {item.subtitle && <span className=' text-xs text-gray-400 ml-2'>( {item.subtitle} )</span>}
              </div>
              {item.description.map((item, index) => (
                <div className=' text-xs text-gray-400 leading-relaxed' key={index}>- {item}</div>
              ))}
            </div>
          </div>
        ))}
相关推荐
良木林几秒前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
冰橙子id4 小时前
linux-远程访问管理(sshd,scp,sftp)
linux·网络·ssh
光电的一只菜鸡6 小时前
ubuntu之坑(十五)——设备树
linux·数据库·ubuntu
工业甲酰苯胺6 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
saynaihe7 小时前
ubuntu 22.04 anaconda comfyui安装
linux·运维·服务器·ubuntu
企鹅与蟒蛇7 小时前
Ubuntu-25.04 Wayland桌面环境安装Anaconda3之后无法启动anaconda-navigator问题解决
linux·运维·python·ubuntu·anaconda