0

我不确定这是否真的是插件和我的配置的问题，或者它是否只是标准行为。

我正在使用 react-i18next 和 i18next-http-backend 从公共文件夹加载翻译文件。延迟加载是一个不错的奖励，但我实际上使用的是后端插件，因为文件是在外部管理的（由非程序员），我无法预先知道哪些文件存在。我不是在服务器端工作，所以我不能直接从文件系统中读取。

问题：我有一个可折叠部分，其内容仅在展开部分时呈现。当该内容需要以前未加载的翻译文件时，文件的获取似乎会触发页面重新加载：它会闪烁并向上滚动。

由于获取文件，页面闪烁对我来说似乎很奇怪。我想 i18next 正在更新，因为它正在加载一个新的命名空间并导致闪烁。那有意义吗？如果是这样，有没有办法告诉 http-backend 所有的命名空间（即 /public/locales 中的所有文件名），仍然保持延迟加载？我的配置中是否缺少某些内容？

这是我的配置：

import en from './en/translation.json';
import de from './de/translation.json';

const localResources = { ...de, ...en };

const customLocalBackend = {
  type: 'backend',
  init: function (services, backendOptions, i18nextOptions) {
    /* use services and options */
  },
  read: function (language, namespace, callback) {
    callback(null, localResources[language][namespace]);
  },
};

export const i18n = i18next
  .use(initReactI18next)
  .use(ChainedBackend)
  .use(LanguageDetector)
  .init({
    lng: 'de',
    fallbackLng: 'de',
    supportedLngs: ['de','en'],
    load: 'languageOnly',
    debug: true,
    backend: {
      backends: [
        HttpBackend,        // load resources from /public folder
        customLocalBackend, // load local resources
      ],
      backendOptions: [
        {
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
        {},
      ],
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    keySeparator: false,
  });

谢谢你的帮助！

4

1 回答 1

0

问题是由<React.Suspense fallback={<div />}>包装完整的反应应用程序引起的。当在运行时注入新的翻译时，会渲染后备 div，从而导致“闪烁”。我删除了包装器并设置react: { useSuspense: false }了 i18n 配置，现在一切都按预期工作。

于 2021-08-13T07:15:20.380 回答