React i18n 国际化 [TypeScript]

最新推荐文章于 2025-03-11 14:52:15 发布

Double__D

最新推荐文章于 2025-03-11 14:52:15 发布

阅读量1.2k

点赞数

分类专栏： React 文章标签： react typescript json

本文链接：https://blog.youkuaiyun.com/qq_42389120/article/details/109049071

版权

React 专栏收录该内容

3 篇文章

订阅专栏

安装

yarn add i18next react-i18next i18next-browser-languagedetector

多语言文件

zh-cn.json

{
    "home":"首页"
}

en-us.json

{
    "home":"Home"
}

i18n.tsx

import i18n from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import enUsTrans from "./en-us.json";
import zhCnTrans from "./zh-cn.json";
import { initReactI18next } from 'react-i18next';

i18n.use(LanguageDetector) //获取当前浏览器语言
.use(initReactI18next) 
.init({
  //资源文件
  resources: {
    enUs: {
      translation: enUsTrans,
    },
    zhCn: {
      translation: zhCnTrans,
    },
  },
  fallbackLng: "zhCn",
  debug: false,
  interpolation: {
    escapeValue: false,
  },
})

export default i18n;

app.tsx引用i18n.tsx

import './i18n'

const App: React.FC = () => {

}

使用方法


import { useTranslation, Trans, Translation } from 'react-i18next'

const App: React.FC = () => {
  let { t ,i18n} = useTranslation()

  return (
    <div >
        {/* 3种常用使用方式 */}
          <div>{t('home')}</div>
          <div><Trans>home</Trans></div>
          <Translation>{t => <div>{t('home')}</div>}</Translation>
        <div>
           <button onClick={() => i18n.changeLanguage(i18n.language === 'enUs' ? 'enUs' : 'zhCn')}>
                {i18n.language === 'enUs' ? 'enUs' : 'zhCn'}
              </button>
        </div>
    </div>
  )
}

export default App