在 React 应用程序中调用 API 而不是文件路径进行翻译

Question

我在 React 应用程序中有以下翻译代码。

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";

    i18n
      .use(initReactI18next)
      .use(HttpApi)
      .init({
        lng: "en",
        fallbackLng: "en",
        keySeparator: false,
    
        interpolation: {
          escapeValue: false,
          /**
           * Add interpolation format method to customize the formatting
           */
          format: (value, format, lng) => {
            if (format === "uppercase") {
              return value.toUpperCase();
            }
    
            return value;
          }
        },
        backend: {
          loadPath: "/locales/{{ns}}/{{lng}}.json"
        }
      });

以上代码中的数据保存在 locale 文件夹中的静态 file 中。我需要从 backend API 而不是从文件中读取数据。我的意思是在下面的代码中我需要调用 API 而不是 loadPath。可以在 react 吗？

        backend:{
          loadPath: "/locales/{{ns}}/{{lng}}.json"
        }

Answer 1

这个答案可能有帮助：

i18next-http-backend 也能够接受注入的请求函数：https://github.com/i18next/i18next-http-backend#backend-options

Answer 2

下面的代码对我有用。

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import backend from 'i18next-http-backend';
import api from "../api";


 alert(navigator.language); 
 var lang=navigator.language;
 if(lang==='en-US')
  lang='en';
let loadResources= api.getTranslations(lang);
const backendOptions = {
  loadPath: 'http://localhost:8080/country/'+lang, 
  request: (options, url, payload, callback) => {
    try {
      loadResources.then((result) => {
        callback(null, {
          data: result,
          status: 200, 
        });
      });
    } catch (e) {
      console.error(e);
      callback(null, {
        status: 500,
      });
    }
  },
};

i18n
  .use(LanguageDetector)
  .use(backend)
  .init({
    backend: backendOptions,
    fallbackLng: "fr",
    debug: false,
    load:"languageOnly",
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false, 
    interpolation: {
      escapeValue: false, 
      formatSeparator: ","
    },
    react: {
      wait: true
    }
});
i18n.changeLanguage(navigator.language);
export default i18n;

在 React 应用程序中调用 API 而不是文件路径进行翻译

calling API instead of file path in react application for translation

javascript

user-interface

reactjs

react-native

react-redux