多语言计划

替换步骤

1.安装包：yarn add react-i18next i18next

2.使用 @赖晓东 Edon Lai (Engineering - FE) 开发的vscode插件，插件地址

https://github.com/Edon-100/react-i18n/blob/main/oppI18n-0.0.2.vsix

用法：

导入组件

import { useTranslation } from 'react-i18next';

用到的地方：

const { t } = useTranslation();

shift+comman+p 人肉替换

react-i18next i18

1. 本地json数据初始化

{
  "home":{
    "title":"首页",
    "content":"我是首页",
  },
  "about":{
    "title":"关于我们",
    "content":"我是关于我们"
  }
}

1. 创建配置react-i18next的react-i18next-config.js文件

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
//i18next-browser-languagedetector插件 
//这是一个 i18next 语言检测插件，用于检测浏览器中的用户语言，
//详情请访问：https://github.com/i18next/i18next-browser-languageDetector
import LanguageDetector from 'i18next-browser-languagedetector';
//引入需要实现国际化的简体、繁体、英文三种数据的json文件
import cn from './locales/zh-cn.json'
import hk from './locales/zh-HK.json'
import en from './locales/en-us.json'
const resources = {
  cn: {
    translation: cn
  },
  hk: {
    translation: hk
  },
  en: {
    translation: en
  },
};
i18n.use(LanguageDetector) //嗅探当前浏览器语言 zh-CN
.use(initReactI18next) // 将 i18n 向下传递给 react-i18next
  .init({ //初始化
    resources, //本地多语言数据
    fallbackLng: "cn", //默认当前环境的语言
    detection: {
      caches: ['localStorage', 'sessionStorage', 'cookie'],
    }
  })

export default i18n

1. 然后将react-i18next-config.js 引入到App.js组件

import i18n from './react-i18next-config'

1. 默认语言和默认数据

  "zh-CN": {
    translation: './locales/zh-cn.json'
  },
  "zh-HK": {
    translation: './locales/zh-HK.json'
  },
  "en-US": {
    translation: './locales/en-us.json'
  },

1. 开发选择切换语言组件