如何解决使用 i18next-http-backend 延迟加载翻译时页面闪烁
我不确定这是否真的是插件和我的配置的问题,还是只是标准行为。
我正在使用 react-i18next 和 i18next-http-backend 从公共文件夹加载翻译文件。延迟加载是一个不错的奖励,但我实际上使用的是后端插件,因为文件是在外部(由非程序员)管理的,我无法预先知道哪些文件存在。我不在服务器端工作,所以我无法直接从文件系统中读取数据。
问题:我有一个可折叠部分,其内容仅在展开该部分时呈现。当该内容需要以前未加载的翻译文件时,文件的获取似乎会触发页面重新加载:它闪烁并向上滚动。
页面因获取文件而闪烁,这对我来说似乎很奇怪。我想 i18next 正在更新,因为它正在加载一个新的命名空间并导致闪烁。那有意义吗?如果是这样,有没有办法告诉 http 后端所有命名空间(即 /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,});
感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。