如何将 API 数据合并到 i18next 而不是静态文件中

Question

我已将文件保存在 public folder 中以响应 translation 的不同 language。现在我需要从 API 获取数据。我可以调用 API 并获取数据。我也知道如何使用translation。但我无法将 API 调用合并到翻译代码文件中。

API.

 axios
      .get(
        'http://localhost:8080/file_download/' +
          navigator.lnaguage
      )
      .then((res) => {
        console.log(res.data);
        });
      });
  }

下面是我对静态文件的翻译代码。对于 TRANSLATIONS_FR 中的 ex，我需要存储 API.

的输出

i18file.js:-

import i18next from 'i18next';

const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');
import xios from 'axios';

import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js';
import { TRANSLATIONS_EN } from '../public/locales/en/en.js';

i18next
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: TRANSLATIONS_EN,
      fr: TRANSLATIONS_FR,
    },
    fallbackLng: 'fr',
  });

i18next.changeLanguage(navigator.language);

export default i18next;

我必须将 API 代码插入到 i18file.js 文件中。如果 browser 检测到 en 那么我必须调用 english 并在 resources 中分配。如果浏览器检测到 frech，那么我也必须这样做。

能否请您提出建议。我来写代码。

编辑 1:- 我在下面写 code，它正在抛出 error。 API 下面将从 database 发送 json data。这个数据我是 not storing in file 但直接使用。

http://localhost:8080//file_download/en
Below is the code

import i18next from 'i18next';
import Backend from 'i18next-http-backend';

const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');

 i18next
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
       loadPath: 'http://localhost:8080//file_download/en' //this is API path which will return result.
    }, 
    resources: {
      en:res.data //I need to assign here.
    },
    fallbackLng: 'fr',
  });
  i18next.changeLanguage(navigator.language);
export default i18next;

我怎样才能将 API 合并到 code 中，并在 en 语言中使用它的 data。

Answer 1

已更新 作为await

我建议使用另一个插件 i18next-http-backend 正如 i18next 提到的 here

您需要先安装插件npm i i18next-http-backend

然后定义后端。有一些例子here

// import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js';
// import { TRANSLATIONS_EN } from '../public/locales/en/en.js';
import Backend from 'i18next-http-backend';

i18next
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
       loadPath: 'http://localhost:8080/file_download/{{lng}}/{{ns}}.json'
    }, // your backend options.
    // More info here: https://github.com/i18next/i18next-http-backend
    resources: {
      en,
      fr
    },
    fallbackLng: 'fr',
  });

i18next.changeLanguage(navigator.language);

export default i18next;

Answer 2

你不需要写 http://localhost:8080 作为你的 get URL 的前缀。只是一个 / 指的是 public 文件夹。只需将 API 文件中的 axios URL 更改为 :

 axios
      .get(
        '/file_download' +
          navigator.lnaguage
      ) + '.json' // or any other format that your language file is
      .then((res) => {
        console.log(res.data);
        });
      });
  }

Answer 3

有个great article explaining exactly how to adapt your code to load the translations via api here: https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#separate

它引入了 i18next-http-backend 模块，向您展示了放置翻译文件的位置：

以及如何调整代码：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  // i18next-http-backend
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  });

export default i18n;

可以找到完整示例 here。

——

或者，您也可以像这样延迟加载翻译：https://github.com/i18next/i18next-resources-to-backend#you-can-also-lazy-load-the-in-memory-translations-ie-when-using-webpack

顺便说一句：i18next-http-backend 也可以注入自定义请求函数： https://github.com/i18next/i18next-http-backend#backend-options

喜欢这里：https://github.com/i18next/i18next-http-backend/issues/34#issuecomment-729908814

Answer 4

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

 var lang=navigator.language;

let loadResources= apiDelegate.getTranslations(lang);
const backendOptions = {
  loadPath: 'http://localhost:8080/code/'+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;

如何将 API 数据合并到 i18next 而不是静态文件中

how to incorporate API data in i18next instead of static file

javascript

user-interface

reactjs

react-native

react-redux