如何在同一个应用上运行 ReactI18Next 的 2 个实例？

在同一个应用程序中运行两个ReactI18Next实例的需求通常出现在需要管理多种不同的本地化资源或配置时。例如，可能一个实例专门用于用户界面的翻译，另一个实例用于处理特定模块或库的翻译。下面是如何实现这一功能的步骤：

1. 安装必要的库

首先，确保你的项目中已经安装了 react-i18next 和 i18next。

bash
npm install i18next react-i18next

2. 创建两个独立的 i18n 实例

你可以通过创建两个独立的 i18n 配置来实现。下面是如何创建这些实例的示例代码：

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

// 第一个i18n实例
const i18nInstance1 = i18n.createInstance();
i18nInstance1
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: { key: "Hello from Instance 1" } },
      fr: { translation: { key: "Bonjour de l'instance 1" } },
    },
    lng: "en",
    interpolation: { escapeValue: false },
  });

// 第二个i18n实例
const i18nInstance2 = i18n.createInstance();
i18nInstance2
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: { key: "Hello from Instance 2" } },
      fr: { translation: { key: "Bonjour de l'instance 2" } },
    },
    lng: "en",
    interpolation: { escapeValue: false },
  });

3. 使用对应的实例

在你的React组件中，你可以通过 I18nextProvider 来分别使用这些独立的实例。例如：

javascript
import React from 'react';
import { I18nextProvider, useTranslation } from 'react-i18next';

function App() {
  return (
    <div>
      <I18nextProvider i18n={i18nInstance1}>
        <MyComponent instance="Instance 1" />
      </I18nextProvider>
      <I18nextProvider i18n={i18nInstance2}>
        <MyComponent instance="Instance 2" />
      </I18nextProvider>
    </div>
  );
}

function MyComponent({ instance }) {
  const { t } = useTranslation();
  return <p>{t('key')} from {instance}</p>;
}

4. 注意事项

• 确保每个实例的资源和配置不会互相冲突。
• 使用多个实例可能会增加应用程序的复杂度和资源消耗，因此在决定使用多实例之前要仔细评估需求。

以上就是在同一个应用程序中运行两个ReactI18Next实例的基本步骤。这种方法可以在处理大型应用或需要高度模块化翻译资源时非常有用。