react-i18next，从props添加资源答案

【问题标题】：react-i18next, add resources from propsreact-i18next，从props添加资源
【发布时间】：2018-02-13 12:43:22
【问题描述】：

我有带有组件的仓库和带有主应用程序的仓库。我在 repo 中使用组件实现了 i18next，当我在这个 repo 中有一个 i18n 配置文件时（或者当我通过 app repo 中的 props 传递它时）它工作正常。但是当我尝试从主应用程序仅发送“资源”部分并将其替换为组件的配置文件时，我遇到了问题。我试图克隆 i18n 实例并设置资源，但它不起作用。这是我的配置文件： i18n.js

import i18n from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';

i18n
  .use(LngDetector)
  .use(reactI18nextModule)
  .init({
    detection: {
      order: ['cookie', 'localStorage'],
      lookupLocalStorage: 'i18n_lang',
      lookupCookie: 'i18n_lang',
      caches: ['localStorage'],
    },
    load: 'current',
    fallbackLng: 'en',

    ns: ['components'],
    defaultNS: 'components',

    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ',',
        },
        react: {
          wait: true,
     },
  });

export default i18n;

resources.js 文件（我在开始时尝试使用资源键，但它仍然不起作用）：

import * as en from './en.json';
import * as de from './de.json';

export default {
  en: {
    components: en,
  },
  de: {
    components: de,
  },
};

现在我尝试了这样的事情：

import * as langs from './resources';

const newI18 = i18n.cloneInstance({ resources: langs });

const i18ProviderDecorator = (storyFn) => (
  <I18nextProvider i18n={newI18}>
    { storyFn() }
  </I18nextProvider>

当我通过带有资源的道具传递 i18n.js 时，它运行良好，但我想从主应用程序中删除 i18next 并将其仅保留在组件中。问候

【问题讨论】：

标签： javascript reactjs i18next react-i18next

【解决方案1】：

i18next 克隆实例使用与原始实例相同的存储 -> 并且不会再次初始化 -> 因此以这种方式传递资源不起作用：https://github.com/i18next/i18next/blob/master/src/i18next.js#L308

创建一个新实例 i18n.createInstance 或使用 i18n.addResourceBundle 将资源传递给克隆：https://www.i18next.com/api.html#addresourcebundle

【讨论】：