我正在使用 react-i18next 和 i18n 实现 React 本地化,i18next languageChanged 会触发,但是我使用该功能的组件
t()
不会自动重新渲染,UI 仅在手动重新加载时才会更改页面。
i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
// detect user language
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
.init({
debug: true,
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
resources: {
en: {
translation: {
greeting: "Hello",
},
},
ar: {
translation: {
greeting: "مرحبا",
},
},
},
});
export default i18n;
main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./i18n";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.jsx
import { Suspense } from "react";
import LanguageSelector from "@/components/language/LanguageSelector";
import Home from "@/pages/root/Home";
function App() {
return (
<Suspense fallback={<p>laoding</p>}>
<LanguageSelector />
<Home />
</Suspense>
);
}
export default App;
LanguageSelector.jsx,更改语言的组件:
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
const languages = [
{ code: "en", nativeName: "English" },
{ code: "ar", nativeName: "العربية" },
];
const LanguageSelector = () => {
const { i18n } = useTranslation();
useEffect(() => {
document.body.dir = i18n.dir();
}, [i18n, i18n.language]);
return (
<div className="flex-center mt-10 gap-5">
{languages.map((lng) => (
<button
className={`${
lng.code === i18n.resolvedLanguage ? "bg-green-100" : ""
} border rounded-xl p-3`}
key={lng.code}
onClick={() => i18n.changeLanguage(lng.code)}
>
{lng.nativeName}
</button>
))}
</div>
);
};
export default LanguageSelector;
Home.jsx,使用
t()
并且不会在 languageChange 上重新渲染的组件:
import React from "react";
import { useTranslation } from "react-i18next";
const Home = () => {
const { t } = useTranslation();
return (
<h1 className="flex-center h-full-screen text-4xl">{t("greeting")}</h1>
);
};
export default Home;
我已经尝试过这个Issue的解决方案并将这些选项添加到 i18n.js init 中:
react: {
bindI18n: "loaded languageChanged",
bindI18nStore: "added",
useSuspense: true,
},
但这并没有帮助。 我错过了什么?
自从我昨天将react-i18next从v12.3.1升级到v14.0.2后,我也遇到了这个问题。我决定现在降级到以前的版本,没关系。