用i18next使你的应用国际化-React

ref: https://www.i18next.com/

i18next是一个用JavaScript编写的国际化框架。

i18next为您提供了一个完整的解决方案，本地化您的产品从web端到移动端和桌面端。

在react项目中安i18next依赖：

• i18next
• react-i18next
• i18next-browser-languagedetector，用于检测用户语言

npm install i18next react-i18next i18next-browser-languagedetector

创建i18n.js文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector) // 检测用户语言
  .use(initReactI18next) // 将i18n实例传递给react-i18next
  .init({ // 初始化 i18next
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React已经转义了
    },
    resources: {
      en: {
        translation: {
          // 此处放置翻译内容
          description: {
            part1: 'Edit <1>src/App.js</1> and save to reload.',
            part2: 'Learn React'
          }
        }
      },
      de: {
        translation: {
          description: {
            part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',
            part2: 'Lerne React'
          }
        }
      }
    }
  });

export default i18n;

在index.js中导入i18n.js：

React>=18.0.0的版本：

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

// 导入 i18n (需要绑定)
import './i18n';

const root = createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

更早的版本：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// 导入 i18n (需要绑定)
import './i18n';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

使用：在第一个文本中使用了Trans组件，在第二个文本中使用了useTranslation (hook) :

// App.js
import logo from './logo.svg';
import './App.css';
import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <Trans i18nKey="description.part1">
            Edit <code>src/App.js</code> and save to reload.
          </Trans>
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('description.part2')}
        </a>
      </header>
    </div>
  );
}

export default App;

语言切换器

// App.jsx
...

const lngs = {
  en: { nativeName: 'English' },
  de: { nativeName: 'Deutsch' }
};

function App() {
...
    <img src={logo} className="App-logo" alt="logo" />
    <div>
      {Object.keys(lngs).map((lng) => (
        <button key={lng} style={
  { fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => i18n.changeLanguage(lng)}>
          {lngs[lng].nativeName}
        </button>
      ))}
    </div>
    <p>
      <Trans i18nKey="description.part1">
        Edit <code>src/App.js</code> and save to reload.
      </Trans>
    </p>
...
}

自i18next v21以来，i18next. resolvedlanguage被设置为当前解析的语言，并且可以用作主要使用的语言，上例中有使用。

i18next.language vs. i18next.languages

i18next.language;
// 设置为当前检测或设置的语言

i18next.languages;
// 设置为将用于查找翻译值的语言代码数组
// 设置语言后，将使用新的语言代码填充此数组
// 除非被覆盖，否则将使用该代码的不太特定的版本填充此数组，以用于回退目的，然后是回退语言列表

// 初始化回退语言
i18next.init({
   
    fallbackLng: ["es", "fr", "en-US", "dev"]
});
// 改变语言
i18next.changeLanguage