在组件外部使用 react-i18next t 函数。无法正确使用承诺

Question

首先我想说我对 React 和 ES6 总体来说还比较陌生。

到目前为止，我已经在组件中成功实现了 react-i18next。我还添加了 i18next-scanner 以自动将翻译密钥提取到 .json-files.

我有一个 router/index.js 文件，其中包含我的项目的路由。该文件还用于创建侧边栏导航。

在这个文件中，我有用于侧边栏导航的名称。路线存储为可能包含子路线的对象。我的问题是我想使用 i18next t() 函数来翻译这些名称。

我的代码

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

routes/index.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> 组件生成字符串感觉不对。设置空字符串并在以后使用 promise 覆盖这些感觉一点也不优雅。

我希望仍然能够使用扫描仪提取密钥。这使得传递密钥以供稍后在侧边栏组件中与 t() 函数一起使用的解决方案变得麻烦。扫描器不会使用变量获取动态翻译。

我的问题

我错过了什么？一个合适的 promise 解决方案应该是什么样子的？在组件外翻译字符串的正确方法是什么？

我可能想错了。但是就像我在介绍中所说的那样，我不是一个经验丰富的 JS/React-developer，而且我对 promises 的先验知识和经验是有限的。我觉得我使用承诺的解决方案实施不当。我希望最终解决方案能够被密钥提取器扫描。

当用户使用 i18n.changeLanguage(lng) 更改语言时，在组件外部生成的翻译键不会更新。更新这些的最佳方法是什么？

非常感谢所有反馈和帮助。

Answer 1

我找到了我认为可以很好解决我的问题的方法。在这种情况下实际上不需要使用 promise。我可以通过两种方式解决这个问题：

1) 重写routes/index.js 以将t() 函数作为参数。在渲染时从组件传递此函数（使用 i18next 钩子或 HOC）。

2) 在 routes/index.js 中使用翻译键并在组件中渲染时翻译这些键。为了能够扫描键，添加一个将键作为参数的虚拟函数，并简单地 returns 它。将此功能添加到扫描仪。一种方法是将以下内容添加到 i18n.js 文件。

export const tk = (key) => key;

如果有人有更好的解决方案或想解释如何正确使用 i18next 返回的承诺，我洗耳恭听！ :)

在组件外部使用 react-i18next t 函数。无法正确使用承诺

Using react-i18next t function outside components. Having troubles using promises correctly

i18next

reactjs

react-i18next