TS/ReactJS: 无法更改 i18n 语言答案

【问题标题】：TS/ReactJS: can't change i18n languageTS/ReactJS: 无法更改 i18n 语言
【发布时间】：2023-02-04 18:06:58
【问题描述】：

我现在在我的项目中使用 TypeScript，我的 i18n 系统在那之前工作正常。现在我无法使用“i18n.changeLanguage([language])”切换我的语言，而且我找不到问题出在哪里。

import "./App.css";
import React from "react";
import { Header } from "./Header/Header";
import { useTranslation } from "react-i18next";
import i18n from "./i18n";

export const App = () => {
  const { t } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <Header changeLanguage={changeLanguage} /> // the toggle is here and works just fine
      <Center t={t} />
    </div>
  );
};

我的 i18n.ts 文件如下所示：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import fr from "./assets/locales/fr/translation.json";
import en from "./assets/locales/en/translation.json";

export const defaultNS = "fr";
export const resources = {
  fr: { fr },
  en: { en },
};

i18n.use(initReactI18next).init({
  lng: "fr",
  fallbackLng: "fr",
  ns: ["fr", "en"],

  interpolation: {
    escapeValue: false,
  },
  defaultNS,
  resources,
});

export default i18n;

我不知道它是否重要，但我将“白名单：”更改为“ns：”，因为它不适用于 TS。

【问题讨论】：

标签： javascript reactjs typescript internationalization

【解决方案1】：

我终于找到了另一种处理方式，但没有 i18n 库。

我的 i18n.ts 文件：

import french from "./assets/locales/fr/translation.json";
import english from "./assets/locales/en/translation.json";

export interface Translations {
  welcome: string;
  lang: string;
  // more variables and types...
}

const fr: Translations = french;
const en: Translations = english;

function getTranslations(language: string): Translations {
  switch (language) {
    case "fr":
      return fr;
    default:
      return en;
  }
}

export default getTranslations;

在我的 App.tsx 中：

import "./App.css";
import React, { useState } from "react";
import getTranslations from "./i18n";

export const App = () => {
  const [translate, setTranslate] = useState(getTranslations("fr"));

  const changeLanguage = (code: string) => {
    setTranslate(getTranslations(code));
  };
return (
    <div className="App">
      <Header changeLanguage={changeLanguage} /> // the toggle is here
      <Center t={translate} /> // I can use the translated variables here
    </div>
  );
};

最后，我需要一个用于我的 JSON 文件的接口、一个用于更改语言的 switch case 和一个用于更新的状态。

【讨论】：