React项目国际化 i18next

当react项目需要国际化时，i18next是一个很好的选择，大致分为以下几步

1. 安装必要的依赖
2. 配置i18next
3. 创建语言资源文件
4. 设置语言切换
5. 使用国际化

1. 安装依赖

// npm
npm i i18next i18next-browser-languagedetector react-i18next 
// pnpm
pnpm add i18next i18next-browser-languagedetector react-i18next 

• i18next是一个流行的国际化库，在React中使用时，一般使用react-i18next
• i18next-browser-languagedetector 是一个用于检测浏览器语言环境的插件
• react-i18next:是一个用于 React 应用程序的国际化库，它基于 i18next 构建，为 React 提供了特定的集成和支持

2. 配置il8next文件

// src/i18n.js
import i18next from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

// 这里是语言包的路径
import enTranslation from './locales/en-US/translation.json'
import zhTranslation from './locales/zh-CN/translation.json'

// 设置语言包
i18next
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslation },
      zh: { translation: zhTranslation },
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // 不转义以允许HTML标签
    },
    detection: {
      order: ['querystring', 'cookie'],
      caches: ['cookie'],
    },
  })

export default i18next

3. 创建语言资源文件（即enTranslation/zhTranslation文件）

设置不同字段的不同语言种类的具体翻译

// 英文语言资源文件
// locales/en-US/translation.json
{
  "home": {
    "test": "test"
  }
}

// 中文语言资源文件
// locales/zh-CN/translation.json
{
  "home": {
    "test": "测试"
  }
}

4. 设置语言切换

import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Select, Space } from 'antd'

const LanguageSelector = () => {
  const { i18n } = useTranslation()
  const handleLanguageChange = (value) => {
    i18n.changeLanguage(value)
  }

  return (
    <Space>
      <span>langeuage: </span>
      <Select
        defaultValue='en'
        onChange={handleLanguageChange}
        style={{ width: '100px' }}
        options={[
          {
            value: 'en',
            label: 'English'
          },
          {
            value: 'zh',
            label: '中文'
          }
        ]}
      />
    </Space>
  )
}

export default LanguageSelector

5. 在组件中使用语言切换器

// 先在根目录
ReactDOM.render(
  <I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>, document.getElementById('root')

然后在需要使用的组件中引入LanguageSelector

import React from 'react'
import { useTranslation } from 'react-i18next'
import LanguageSelector from '../src/languageSelect'

const HelloWorld = () => {
  const { t } = useTranslation()
  return (
    <>
      <div>{t('home.test')}</div>
      <LanguageSelector />
    </>
  )
}

此时再切换相应的语言就可以，动态修改为语言资源文件中对应字段下的值了