从多个后端加载翻译

Question

我有使用 react-i18next 的 React 应用程序，翻译存储在两个位置。一组存储在应用程序本地的文件夹中，其余翻译来自远程 API。

我正在努力将这两个集合加载到应用程序中。使用 i18next-chained-backend 插件，它似乎只在第一个后端不加载翻译时提供后备，我似乎无法将其配置为加载两组翻译。

在基于 React 的应用程序中包含来自多个来源的翻译的最佳方法是什么？

Answer 1

我能够在不使用任何依赖项的情况下从不同的地方加载翻译。 （仅适用于 npm 包 'react-i18next' 和 'i18next'）

这些是我遵循的步骤：

1. 在i18n.js 中，设置您的客户端语言环境定义。
2. 提供命名空间列表以在同一文件中的ns 键中查找翻译键。

   假设命名空间是 ['translations', 'bkdynamic']

3. 在您的主要反应组件中，从 API 端点获取您的翻译。

   在给定的沙箱中，API 调用是一个模拟，它从您的 public/ 目录中获取 sampleTx.json。这可以替换为返回 JSON 的实际端点。

4. 使用i18next.addResourceBundle API，为您需要的语言加载这些翻译。

   在命名空间bkdynamic 中为所选语言加载新获取的翻译。 注意： 在进行i18next.addResourceBundle 调用时，将deep 参数设置为true；以便扩展新的翻译。

5. 其他翻译 API 相同。

这里是实时沙盒 - https://codesandbox.io/embed/i18next-muliple-files-p565v

• 本地翻译 - 'Hello', 'Morning'
• 从另一个端点加载的翻译 - '很好'

希望这会有所帮助。

Answer 2

我设法处理了。

它适用于经典 i18next-xhr-backend。

您需要准备组成路径的自定义函数：

const constructLoadPath = (languages, namespaces) => {
      if(namespaces[0] === 'basecontent'){
        return 'http://localhost:8080/api/i18n/{{lng}}/'
      }else {
        return '/locales/' + languages.join('+') + '/' + namespaces.join('+') + '.json';
      }
    } 

那么你需要提供这个函数给后端的loadPath选项

backend: {
  loadPath: constructLoadPath,
}