快捷導(dǎo)航

在?React?中使用?i18next的示例

更新時間：2023年01月06日 15:08:25 作者：啵啵怪_

這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1. 安裝依賴

npm i i18next react-i18next i18next-browser-languagedetector

i18next 提供了翻譯的基本能力。
react-i18next 是 i18next 的一個插件，用來降低 react 的使用成本。
i18next-browser-languagedetector 是用來檢測瀏覽器語言的插件。

2. 在src下創(chuàng)建i18n文件夾

2.1 common下的zh-CN.js

{
  "common": {
    "personSetting": "個人設(shè)置",
    "modifyPassword": "修改密碼",
    "currentTime": '當(dāng)前時間是 {{time}}',
  }
}

2.2 common下的en-US.js

{
  "common": {
    "personSetting": "Personal settings",
    "modifyPassword": "change Password",
    "currentTime": 'Current time is {{time}}',
  }
}

2.3 在common的index.js文件中引入

import en_common from './en-US/translation.json'
import zh_common from './zh-CN/translation.json'

export const langCommon = { en_common, zh_common }

2.4 在resources.js中引入common模塊的翻譯

import { langCommon } from './locales/common' //公共需要翻譯的內(nèi)容
// 把所有的翻譯資源集合
const resources = {
  en: {
    translation: {
      ...langCommon.en_common
    },
  },
  zh: {
    translation: {
      ...langCommon.zh_common
    },
  }
}
export { resources }

2.5 utils下初始化語言的方法

export function initLangage() {
  let lang = localStorage.getItem('language') || navigator.language // 獲取瀏覽器的語言環(huán)境，兼容IE的寫法
  if (lang) {
    lang = lang.substr(0, 2).toLowerCase() // 截取前兩位字符，并轉(zhuǎn)化為小寫
    return lang
  } else {
    return 'en'
  }
}

2.6 i18n.js代碼如下

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector';
import { resources } from '@/i18n/resources'
import { initLangage } from '@/utils'

i18n
  // 檢測用戶當(dāng)前使用的語言
  // 文檔: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // 注入 react-i18next 實(shí)例
  .use(initReactI18next)
  // 初始化 i18next
  // 配置參數(shù)的文檔: https://www.i18next.com/overview/configuration-options
  .init({
    resources, //資源初始化
    lng: initLangage(),
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    react: {
      useSuspense: false, // this will do the magic
    },
    debug: false,
  })
export default i18n

3. 在app.tsx中引入

import './i18n/i18n'

4. 頁面中使用

import { useTranslation } from 'react-i18next';

const SafetyManage: React.FC = (): React.ReactElement => {
  const { t } = useTranslation();
  return (
    <div >
      <Button
         type="primary"
       >
         {t('common.personnalSetting')}
       </Button>,
       <Button
       >
         {t('common.modifyPassword')}
       </Button>,
       <p>
		  {t('common.currentTime', { time: dayjs().format('MM/DD/YYYY') })}
		</p>
    </div>
  );
}

export default App;