react + i18n：国际化

注意版本 我这是旧版 react
react 16.8.6
i18next 20.6.1
react-i18next 11.18.6

文件：zh.json

{“hello”: "你好"
}

文件：en.json

{“hello”: "hello"
}

文件：i18n.tsx

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';// 静态导入翻译文件
import enTranslation from './en.json';
import zhTranslation from './zh.json';const langLocal = window.localStorage.getItem('logan-config-content-lan');
let lang = 'zh';
if (langLocal) {lang = langLocal === 'zh-CN' ? 'zh': 'en';
} else {window.localStorage.setItem('logan-config-content-lan', lang);
}
// 直接使用（默认从 translation 查找）
// t('hello')
// t('common.hello') 如果设置了 ns(命名空间) 则需要加前缀
// 同时 en: { common: enTranslation } 这路也需要改写，还是 translation 更容易伟华
i18n.use(initReactI18next).init({resources: {en: { translation: enTranslation }, // 英文资源  改为默认的 translation 命名空间zh: { translation: zhTranslation }, // 中文资源},lng: lang, // 默认语言fallbackLng: 'zh', // 回退语言keySeparator: false, interpolation: {escapeValue: false}// ns: ['common'], // 命名空间// defaultNS: 'common', // 默认填写命令空间
});export default i18n;

文件 base.tsx

AppContainer 是 React Hot Loader（或 react-hot-loader）提供的一个高阶组件，用于在开发过程中实现 热模块替换（Hot Module Replacement, HMR），即在不刷新整个页面的情况下，实时更新 React 组件的状态

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { I18nextProvider } from 'react-i18next'; // 引入 I18nextProvider
import Layout from './layout';
import i18n from '../i18n/i18n';
import { BaseProps } from './type';
export default function bootstrap(App) {class Base extends Component<BaseProps, any> {render() {return (<I18nextProvider i18n={i18n}> {/* 包裹整个应用 */}<Layout {...this.props}><App {...this.props} /></Layout></I18nextProvider>);}}if (EASY_ENV_IS_NODE) {return Base;}const state = window.__INITIAL_STATE__;window.__INITIAL_STATE__ = {};const root = document.getElementById('app');if (EASY_ENV_IS_DEV) {ReactDOM.hydrate(<AppContainer><I18nextProvider i18n={i18n}> {/* 开发环境同样需要包裹 */}<App {...state} /></I18nextProvider></AppContainer>,root);if (module.hot) {module.hot.accept();}} else {ReactDOM.hydrate(<I18nextProvider i18n={i18n}> {/* 生产环境包裹 */}<App {...state} /></I18nextProvider>,root);}
}