react-i18next

Question

我想让我的 i18n 延迟加载翻译文件和文档，这似乎很简单 - 添加 .use(backend) 和 import backend from "i18next-http-backend"。

唯一的问题是我在我的提供中使用的 i18n 实例已经在我的组织的内部回购协议中定义为一个 UI 库（我必须使用），它只公开了一种方法来初始化一个给你的 i18n 实例 - 这对 .use(backend) 没有任何规定，现在我不知道如何将它添加到代码中。

这是库代码-

...

export const getDefaultI18nextInstance = (resources) => {
  i18n
    .use(AlphaLanguageDetector)
    .use(initReactI18next)
    .init({
      fallbackLng: 'en',

      // have a common namespace used around the full app
      ns: [
        'translations',
        'common'
      ],
      nsMode: 'fallback',
      defaultNS: 'translations',

      // debug: (process.env.NODE_ENV && process.env.NODE_ENV === 'production') ? false : true,
      debug: true,

      interpolation: {
        escapeValue: false, // not needed for react!!
      },

      resources: resources || null,

      react: {
        wait: true
      }
    });
    Object.keys(translations).forEach(lang => {
      Object.keys(translations[lang]).forEach(namespace => {
        i18n.addResourceBundle(lang, namespace, translations[lang][namespace], true, true)
      })
    });
  return i18n;
}

export default {
  getDefaultI18nextInstance,
  translations,
  t
};
...

我尝试在我的 index.js 文件中使用类似 <I18nextProvider i18n={i18n.getDefaultI18nextInstance().use(backend)}> 的东西，但随后出现错误

i18next::backendConnector: No backend was added via i18next.use. Will not load resources.

仅供参考，我的语言环境位于 projectRoot/locales/{lang}/translation.json。

Answer 1

您可以使用 i18n.cloneInstance(options, callback) 并将您的后端配置作为 options 传递，它将合并您的 ui 库具有的所有选项，并且 return将能够获取的 i18next 的新实例。

import HttpApi from 'i18next-http-backend';

const original = getDefaultI18nextInstance({});

export const i18n = original
  .cloneInstance({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  })
  .use(HttpApi);

react-i18next - 初始化后如何向 i18n 添加后端？

react-i18next - How do I add a backend to i18n after it has been initialized?

lazy-loading

internationalization

i18next

reactjs