Question

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

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

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

Answer 1

我设法解决了。

它可以与经典的 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,
}

Answer 2

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

这些是我遵循的步骤：

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

说名称空间是['translations'，'bkdynamic']
在您的主要react组件中，从API端点获取翻译。

在给定的沙箱中，API调用是一个模拟，它从sampleTx.json目录中提取public/。可以将其替换为返回JSON的实际端点。
使用i18next.addResourceBundle API，为您需要的语言加载这些翻译。

将新获取的翻译加载到所选语言的命名空间bkdynamic中。注意：在进行i18next.addResourceBundle通话时，将deep参数设置为true；以便扩展新的翻译。
其他翻译API都是相同的。

此处有实时沙箱-https://codesandbox.io/embed/i18next-muliple-files-p565v

本地翻译-“你好”，“早晨”
从另一个端点加载的翻译-'好'

希望这会有所帮助。

从多个后端加载翻译

2 个答案: