首先，我想说的是，总的来说，我对 React 和 ES6 比较陌生。
到目前为止，我已经实现了 react-i18next，并在组件方面取得了巨大的成功。我还添加了 i18next scanner 来自动将翻译密钥提取到 .json 文件。
我有一个包含项目路由的router/index.js文件。此文件还用于创建侧边栏导航。
在此文件中，我有用于侧边栏导航的名称。路由存储为可能包含子路由的对象。我的问题是我想使用 i18nextt()函数来翻译这些名称。
我的代码
i18n.js：
// i18n.js
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const i18n = i18next
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
debug: true,
// ...
},
});
export { i18next }; // instance
export default i18n; // promise
路由/索引.js：
// routes/index.js
import React from 'react';
import i18n, { i18next } from 'i18n';
import { Trans } from 'react-i18next';
// other imports...
// Does not work since the translations aren't loaded yet.
const dashboardRoute = {
name: i18next.t('dashboard'),
path: '/',
component: MyPageComponent,
children: null,
};
// Solution 1: Trans component for generating strings
const dashboardRouteTrans = {
name: <Trans i18nKey="dashboard" />,
path: '/',
component: MyPageComponent,
children: null,
};
// Solution 2: Use promise to rewrite string
const dashboardRoutePromise = {
name: '', // Init with empty string
path: '/',
component: MyPageComponent,
children: null,
};
i18n.then(function(t) {
// Overwrite with translated string using promise
dashboardRoutePromise.name = t('dashboard');
});
export default [
dashboardRoute,
dashboardRouteTrans,
dashboardRoutePromise
];
问题
到目前为止，我提出的两个解决方案确实有效。但感觉应该有更好的方法来实现这一点。使用<Trans>组件生成字符串感觉是错误的。设置空字符串并在以后使用承诺覆盖这些字符串一点也不优雅。
我希望仍然能够使用扫描仪提取密钥。这使得传递密钥以稍后与侧边栏组件中的t()功能一起使用的解决方案变得麻烦。扫描程序不会使用变量拾取动态翻译。
我的问题
我错过了什么？一个合适的承诺解决方案应该是什么样子的？在组件之外翻译字符串的正确方法是什么？
我可能想错了。但就像我在介绍中所说的那样，我不是一个经验丰富的 JS/React-开发人员，我对承诺的先验知识和经验是有限的。我觉得我使用承诺的解决方案被错误地实现了。我希望密钥提取器可以扫描最终解决方案。
当用户使用i18n.changeLanguage(lng)更改语言时，在组件外部生成的翻译键不会更新。更新这些内容的最佳方法是什么？
非常感谢所有反馈和帮助。
我找到了我认为可以解决我问题的好方法。在这种情况下，实际上没有必要使用承诺。我可以通过两种方式解决此问题：
1(重写routes/index.js，将t()函数作为参数。在渲染时从组件传递此函数(使用 i18next 钩子或 HOC(。
2( 在routes/index.js中使用转换键，并在组件中渲染时转换这些键。为了能够扫描密钥，请添加一个虚拟函数，该函数将密钥作为参数并简单地返回它。将此功能添加到扫描仪。执行此操作的一种方法是将以下内容添加到i18n.js文件中。
export const tk = (key) => key;
如果有人有更好的解决方案或想解释如何正确使用 i18next 返回的承诺，我全听！ :)