【笔记】React 国际化

React 国际化

前言

仅管市面上存在多款流行的国际化解决方案，但是笔者个人精力有限在此只记录工作学习中遇到的解决方案（持续更新）
react-i18next 方案

1. 安装

1. pnpm install react-i18next i18next --save

复制代码

2. 创建文件

在 src 目录下新建 locales ，并创建 en-US.json 、zh-CN.json 和 resources.js

en-US.json

1. {
2.         "hello":"Hello"
3. }

复制代码

zh-CN.json

1. {
2.         "hello":"你好"
3. }

复制代码

resources.js

1. import enUS from './en_US.json';
2. import zh from './zh_CN.json';
4. const resources = {
5.   'en-US': {
6.     translation: enUS,
7.   },
8.   'zh-CN': {
9.     translation: zh,
10.   },
11.   zh: {
12.     translation: zh,
13.   },
14. };
16. export default resources;

复制代码

在 src 下新建 i18n.ts

i18n.ts

1. import { initReactI18next } from 'react-i18next';
2. import i18n from 'i18next';
3. import resources from '@/locales/resources.js';
4. // the translations
5. // (tip move them in a JSON file and import them,
6. // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
8. let localLang = sessionStorage.getItem('lang');
9. const browserLang = navigator.language;
10. if (!localLang) {
11.   localLang = browserLang === 'zh-CN' ? 'zh-CN' : 'en-US';
12. }
14. i18n
15.   .use(initReactI18next) // passes i18n down to react-i18next
16.   .init({
17.     resources,
18.     lng: localLang, // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
19.     // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
20.     // if you're using a language detector, do not define the lng option
22.     interpolation: {
23.       escapeValue: false, // react already safes from xss
24.     },
25.   });
27. export default i18n;

复制代码

3. 导入

在main.ts/index.ts中全局导入 i18n.ts

main.ts & index.ts

1. import './index.less';
2. import App from './App';
3. import React from 'react';
4. import ReactDOM from 'react-dom';
5. import './i18n'  // 新增：导入i18n
7. ReactDOM.render(
8.   <React.StrictMode>
9.       
10.   </React.StrictMode>,
11.   document.getElementById('root'),
12. );

复制代码

4. 使用

在要使用国际化的页面使用useTranslation hook

Layout.tsx

1. import React from 'react';
3. // 顶部导入 useTranslation
4. import { useTranslation } from 'react-i18next';
6. const Layout: FC = (props: PropsWithChildren) => {
7.   
8.   // 组件内部使用hook
9.   const [t, i18n] = useTranslation();
10.   
11.   // 在事件方法中使用i18n.changeLanguage()方法
12.   const toggleI18n = () => {
13.     const locale = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
14.     i18n.changeLanguage(locale)
15.   }
17.   return (
18.    
19.       <button onClick={toggleI18n}> i18n切换 </button>
20.    
21.   );
22. };
24. export default Layout;

复制代码

5. 追加字典到现有语言项

如果依赖的第三方库已经绑定过选项字典，可以通过如下方法添加自己的字典到现有的语言项中

创建字典的步骤和上述一致，但是在 main.ts 或者 index.ts 中的编写方式有所不同

1. // main.ts & index.ts
2. import { resources } from "@/locales/resources"
3. import { useTranslation } from "react-i18next"
4. // 省略其他代码...
5. const { i18n } = useTranslation();
6. Object.keys(resources).forEach((lan: string) => {
7.     i18n.addResourceBundle(lang, 'translation', localResources[lang], true, false);
8. })

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！