75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import i18n from 'i18next';
|
|
import { initReactI18next } from 'react-i18next';
|
|
import Backend from 'i18next-http-backend'; // 引入 Backend 插件
|
|
import { useLayoutEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
export { useTranslation };
|
|
type I18NextProviderProps = {
|
|
children: React.ReactNode;
|
|
basename?: string;
|
|
noUse?: boolean;
|
|
};
|
|
|
|
export const initI18n = async (basename: string) => {
|
|
// 初始化 i18n
|
|
return new Promise((resolve) => {
|
|
i18n
|
|
.use(Backend) // 使用 Backend 插件
|
|
.use(initReactI18next)
|
|
.init(
|
|
{
|
|
backend: {
|
|
loadPath: `${basename}/locales/{{lng}}/{{ns}}.json`, // 指定 JSON 文件的路径
|
|
},
|
|
lng: 'zh', // 默认语言
|
|
fallbackLng: 'en', // 备用语言
|
|
interpolation: {
|
|
escapeValue: false, // react 已经安全地处理了转义
|
|
},
|
|
},
|
|
(e) => {
|
|
console.log('e', e);
|
|
resolve(true);
|
|
},
|
|
);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 国际化组件,初始化
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
export const I18NextProvider = (props: I18NextProviderProps) => {
|
|
const { children, basename, noUse } = props;
|
|
if (noUse) {
|
|
return <>{children}</>;
|
|
}
|
|
const [init, setInit] = useState(false);
|
|
useLayoutEffect(() => {
|
|
initCheck();
|
|
}, []);
|
|
const initCheck = async () => {
|
|
let _currentBasename = '';
|
|
if (typeof basename === 'undefined') {
|
|
const local = localStorage.getItem('locale-basename');
|
|
if (local) {
|
|
_currentBasename = local;
|
|
} else {
|
|
_currentBasename = '';
|
|
}
|
|
} else {
|
|
_currentBasename = basename;
|
|
}
|
|
if (_currentBasename === '/') {
|
|
_currentBasename = '';
|
|
}
|
|
initI18n(_currentBasename);
|
|
setInit(true);
|
|
};
|
|
if (!init) {
|
|
return <></>;
|
|
}
|
|
return <>{children}</>;
|
|
};
|