添加i18

.vscode/settings.json

@@ -6,14 +6,15 @@
   "eslint.useFlatConfig": true,
   "editor.formatOnSave": false,
   "eslint.validate": ["html", "css", "scss", "json", "jsonc"],
-  "i18n-ally.displayLanguage": "zh-cn",
-  "i18n-ally.enabledParsers": ["ts"],
-  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledParsers": ["json"],
+  "i18n-ally.enabledFrameworks": ["react"],
   "i18n-ally.editor.preferEditor": true,
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["src/locales/langs"],
   "prettier.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "unocss.root": ["./"],
-  "vue.server.hybridMode": true
+  "unocss.root": [
+    "./"
+  ],
 }

package.json

@@ -10,10 +10,13 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^28.1.8",
     "@types/node": "^14.18.63",
-    "@types/react": "^17.0.83",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "i18next": "^23.16.4",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.0",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "react-zl365": "file:",

src/App.tsx

@@ -1,18 +1,18 @@
-import {Component} from "react";
+import React, { Component } from "react";
 import "./App.css";
 // import List from "./component/List";
 import Header from './component/hedaer';
 import Bar from './component/bar';
 import Content from './component/content';
 
-export class App extends Component{
-  render(){
+export class App extends Component {
+  render() {
     return (
-        <div className="zl-365-container">
-          <Header></Header>
-          <Bar></Bar>
-          <Content></Content>
-        </div>
+      <div className="zl-365-container">
+        <Header></Header>
+        <Bar></Bar>
+        <Content></Content>
+      </div>
     );
   }
 }

src/index.tsx

@@ -1,21 +1,22 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App";
+import { App } from "./App";
+import './locales'
 import reportWebVitals from "./reportWebVitals";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!); // 创建一个根
+
+// 使用 createRoot 渲染你的应用
+root.render(
   <BrowserRouter>
     <FluentProvider theme={webLightTheme}>
       <App />
     </FluentProvider>
-  </BrowserRouter>,
-  document.getElementById('root')
+  </BrowserRouter>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

src/locales/index.ts

@@ -0,0 +1,24 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resources from './resources'
+
+i18n
+  // 检测用户当前使用的语言
+  // 文档: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // 注入 react-i18next 实例
+  .use(initReactI18next)
+  // 初始化 i18next
+  // 配置参数的文档: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: true,
+    fallbackLng: 'zh-CN',
+    lng: "zh-CN",
+    resources,
+    interpolation: {
+      escapeValue: false,
+    }
+  });
+
+export default i18n;

src/locales/langs/en-US.json

@@ -0,0 +1,10 @@
+{
+    "menu": {
+        "home": "home"
+    },
+    "login": {
+        "username": "username",
+        "password": "password",
+        "title": "login"
+    }
+}

src/locales/langs/zh-CN.json

@@ -0,0 +1,10 @@
+{
+    "menu": {
+        "home": "主页"
+    },
+    "login": {
+        "username": "用户名",
+        "password": "密码",
+        "title": "登录"
+    }
+}

src/locales/resources.ts

@@ -0,0 +1,13 @@
+import zhCN from './langs/zh-CN.json'
+import enUS from './langs/en-US.json';
+
+const resources = {
+	"zh-CN": {
+		translation: zhCN
+	},
+	"en-US": {
+		translation: enUS
+	},
+}
+
+export default resources;

src/pages/home/index.tsx

@@ -1,9 +1,11 @@
 import React, { Component } from "react";
+import { useTranslation } from "react-i18next";
 
-export default class MyNavlink extends Component {
-    render() {
-        return (
-            <div>主页</div>
-        )
-    }
-}
+function MyNavlink() {
+    const { t } = useTranslation();
+    return (
+        <div>{t('menu.home')}</div>
+    );
+}
+
+export default MyNavlink;

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react",
   },
   "include": [
     "src"