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

大家好，欢迎来到IT知识分享网。

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