React.js i18n 动态改变语言

Question

我在“React.js”项目中使用“i18n”来支持多语言。我在“导航栏”组件中有一个“切换”按钮。单击该按钮时，我将当前语言信息添加到“lcoalstore”。当我在浏览器中签入时，语言选项在“localstore”中动态工作。我的问题是每次用户更改语言时我都想更改应用程序语言。但那不会发生。这是我的国际化代码：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import messages_az from "./translations/az.json";
import messages_en from "./translations/en.json";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: messages_en,
  },
  az: {
    translation: messages_az,
  },
};




i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: localStorage.getItem("lang"),
    detection: {
      order: ["localStorage", "lang"],
      lookupQuerystring: "lang",
      lookupLocalStorage: "lang",
      caches: ["localStorage"],
    },
    keySeparator: false, // we do not use keys in form messages.welcome
    fallbackLng: "az", // use az if detected lng is not available
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

Answer 1

我修好了！

这是我的切换按钮：

<Menu.Item key="lang" className=" navMenuItem">
        <Switch
          onChange={langSwitch}
          className="langSwitch"
          checkedChildren="En"
          unCheckedChildren="Az"
          defaultChecked
        />
      </Menu.Item>

所以，我将此代码添加到我的 lan Switch() 函数中：

function langSwitch(checked) {
    console.log(`switch to ${checked}`);
    if (checked) {
      i18n.changeLanguage("en");
    } else {
      i18n.changeLanguage("az");
    }
  }

React.js i18n 动态改变语言

React.js i18n dynamically change language

javascript

i18next

reactjs

react-i18next