i18next-react - 如何在同一个应用程序中拥有 2 个 i18next 实例

问题描述

我开发了一个使用 18next 的组件 npm 库。图书馆的消费者，也使用 18next。 我们为每个实例创建了实例，并使用提供程序组件将其向下传递。

出于某种原因，翻译总是被消费者覆盖。

我尝试了解决方案here

但是当我删除 .use(initReactI18Next) 时，它破坏了组件中的翻译，并没有帮助消费者解决最初的问题。还有其他可行的解决方案吗？

I18n.js 文件 - 在组件项目中：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: {
    translation: require('./translations/messages_en.json'),},bg: {
    translation: require('./translations/messages_bg.json'),}

const widgetInstance = i18n.createInstance();
widgetInstance
  // pass the i18n instance to react-i18next so the t function will be in the context.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    resources,react: {
      useSuspense: false,fallbackLng: 'en',debug: true,interpolation: {
      escapeValue: false,// not needed for react as it escapes by default
    },})
  .then(result => result)
  .catch(error => console.error(error));

export default widgetInstance;

使用它的组件：

import i18next from '../../../locale/i18next';

....

<I18nextProvider i18n={i18next}>
<div className="myComponent"/>
</ I18nextProvider i18n={i18next}>

组件 npm 库的使用者中的 i18n.js：

import i18next from ‘i18next’;
import {initReactI18next} from “react-i18next”;
const newInstance1 = i18next.createInstance();
 export default function i18n(locale: string) {
   void  newInstance1.use(initReactI18next)
    .use({
     type: ‘backend’,read: (
        language: string,namespace: string,callback: (
          err: any | null,translations?: Record<string,string>,) => void,) => {
        return import(`./locales/messages_${locale}.json`)
          .then(translation => {
            callback(null,translation);
          })
          .catch(error => {
            callback(error);
          });
     },})
    .init({
      lng: locale,fallbackLng: “en”,keySeparator: false,});
     return newInstance1;
  }

在消费者的提供者中使用它的组件：

import i18n from ‘../../i18n’;
<I18nextProvider i18n={i18n(locale)}>
    <LibrayComponent {...props} />
    </I18nextProvider>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）