i18n 中的嵌套命名空间答案

【问题标题】：Nested namespaces in i18ni18n 中的嵌套命名空间
【发布时间】：2021-10-26 18:53:11
【问题描述】：

我的应用程序相当大，所以为了有一个更有条理的翻译文件，我想使用嵌套命名空间。示例：

{
    "contract": {
        "index": {
            "pageTitle": "Contract"
    }
}

问题在于我在访问它时。在this question 的帮助下，我发现我可以通过如下方式访问索引中的键：

const { t, i18n } = useTranslation('contract', { useSuspense: false });
...
t('index.pageTitle')

问题是在我想要访问的每个键上加上 index. 前缀似乎是相当不必要的。我想做的是导入命名空间索引而不是合同，并按如下方式使用它：

const { t, i18n } = useTranslation('contract:index', { useSuspense: false });
...
t('pageTitle')

这不起作用。我也试过contract.index。在官方文档中，我没有发现任何关于嵌套的信息。是否有可能完成我正在尝试做的事情，还是我必须坚持为每个键加上前缀？

【问题讨论】：

查看这个问题github.com/i18next/react-i18next/issues/387。问题可能在分号中。也许您需要为分隔符定义一些额外的属性

标签： javascript typescript internationalization i18next

【解决方案1】：

Nested namespaces are not supported.

您可以装饰useTranslation 挂钩，为命名空间中的页面提供此扩展功能。

import { useTranslation as useTranslationBase } from "react-i18next";

const useTranslation = (ns, page, props={}) => {
  const trans = useTranslationBase(ns, props);

  return {
    ...trans,
    t: (keys, options) => {
      let _keys = keys;
      if (!Array.isArray(keys)) _keys = [String(keys)];
      _keys = _keys.map(key =>`${page}.${key}`)
     return trans.t(_keys, options)
    }
  }
}

用法

export default function () {
  const { t } = useTranslation('contract', 'index');
  return <div>{t(["pageTitle"])}-{t("pageTitle")}</div>
}

【讨论】：