React国际化项目实践

1.安装如下工具库

   
     "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
     "react-i18next": "^14.1.0",

2.项目scr目录下创建i18n.ts 配置文件

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// 首次打开页面 自动识别当前浏览器语言 设置 原理通过 navigator.languages api获取浏览器首选语言 当然i18n当我们手动设置语言了是会存在localstorage里的 首先会去缓存找
import LanguageDetector from 'i18next-browser-languagedetector';
//这个包 是为了优化我们的包 比如说我是中国人 我就只会汉语，不用其他语言 这个时候这个包就会帮我们做一个懒加载的效果
import Backend from "i18next-http-backend";
import en from './locale/en.json'
import zh from './locale/zh.json'
import Français from './locale/french.json'
import Italiano from './locale/Italiano.json'
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
export const resources = {
  en: {
    translation: {
      ...en
    }
  },
  Français: {
    translation: {
      ...Français
    }
  },
  Italiano: {
    translation: {
      ...Italiano
    }
  },
  zh: {
    translation: {
      ...zh
    }
  }
};

i18n.use(LanguageDetector).use(Backend).use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    interpolation: {
      escapeValue: false // react already safes from xss  默认情况下，i18n会对模版插值的变量进行转义。 设置true的话会防止xss攻击 react本身就防止xss攻击 所以设置false
    }
  });

export default i18n;

3.创建locale文件夹 存放我们的json语言包

4.main.js引入i18n

5.在tsx文件使用i18n转换

import { useTranslation } from 'react-i18next';
const App  = ()=>{
    const {t} = useTranslation()
    return (
    <>
     { t('json定义的属性名') }   
     </>
    )
}

6.切换语言

import { useTranslation } from 'react-i18next';

const Settings: React.FC = () => {
    const { t, i18n } = useTranslation();
    const onChangeLanguage = (language: string) => {
        i18n.changeLanguage(language);
    }
    console.log('i18n.language',i18n.language)
     
}

i18n还有很多其他的用法 有兴趣可以去看看 react.i18next.com/ 对于我目前的项目上面就已经够用了