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
    );
  }
}