中英文国际化

由于项目中采用的是React框架，因此国际化的时候选择的是react-i18next;

第一步

在根应用一般为app.tsx中，使用I18nextProvider包裹,并把中英文配置注入

import { I18nextProvider } from 'react-i18next';

export function rootContainer(container: React.ReactElement) {
  return (
    <I18nextProvider i18n={i18n}>
    <NiceModal.Provider>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={true} />
      <ConfigProvider locale={locale}>
        <App>
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              {React.createElement(
                StyleProvider,
                {
                  hashPriority: 'high', //兼容75 要改为hashPriority: "high",
                  transformers: [legacyLogicalPropertiesTransformer],
                },
                container,
              )}
            </PersistGate>
          </Provider>
        </App>
      </ConfigProvider>
    </QueryClientProvider>
    </NiceModal.Provider>
    </I18nextProvider>
  );
}

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

// 导入翻译文件
import langModule from './module/index.js';

// 资源结构
const resources = {
  en: {
    translation: langModule.en,
  },
  zh: {
    translation: langModule.zh,
  },
};

i18n
  .use(LanguageDetector) // 检测用户语言
  .use(initReactI18next) // 初始化 react-i18next
  .init({
    resources,
    fallbackLng: 'zh', // 默认语言
    interpolation: {
      escapeValue: false, // React 已经防止 XSS
    },
    detection: {
      order: [
        'navigator',
        'htmlTag',
        'localStorage',
        'sessionStorage',
        'cookie',
        'path',
        'subdomain',
      ], // 检测顺序
      caches: ['localStorage'], // 将检测到的语言缓存到 localStorage，下次优先使用
    },
  });

export default i18n;

import dataCenter from './3d-data-center/index';
import commonModule from './common/index';
import institutionDepartment from './system-management/institution-department/index';
import operateNodeSetting from './system-management/operate-node-setting/index';
import operateRecord from './system-management/operate-record/index';
import otherSetting from './system-management/other-setting/index';
import roleManagement from './system-management/role-management/index';
import userManagement from './system-management/user-management/index';

const langModule = {
  zh: {
    common: commonModule.zh,
    system: {
      ...institutionDepartment.zh,
    },
    dataCenter3D: dataCenter.zh,
  },
  en: {
    system: {
      ...institutionDepartment.en,
    },
    common: commonModule.en,
    dataCenter3D: dataCenter.en,
  },
};

export default langModule;

import commonEn from './en';
import commonZh from './zh';

const commonModule = {
  zh: commonZh,
  en: commonEn,
};

export default commonModule;

const commonEn = {
  english: 'English',
  chinese: 'Chinese',
  logOutWarn: 'Due to inactivity, you will be logged out in {{time}}. Stay signed in?',
};

export default commonEn;

使用

const { t,i18n } = useTranslation();

<MyModal
title={t("dataCenter3D.confirm")}
open={showDetailConfirmModal}
</MyModal>