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

目录

查看并设置语言

单页面：html lang

​编辑

浏览器

自定义翻译：react-i18next

设置

模块：staticData.ts

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

应用 

准备

html标签

---

查看并设置语言

单页面：html lang

• 英语: 
• 中文:  或 

"CN" 则表示该语言的特定区域，即中华人民共和国（China）。

更符合语言标准的规范

• 西班牙语: 
• 法语: 
• 日语: 

浏览器

自定义翻译：react-i18next

设置

模块：staticData.ts

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'); // 切换到英语​​​​​​​

准备

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标签

{t('Sign in/Sign up')}
{features?.map((item, index) => (
          

            

              
{item.title}
                {item.subtitle && ( {item.subtitle} )}
              
              {item.description.map((item, index) => (
                
- {item}
              ))}
            
          
        ))}