javascript - i18n 中的嵌套命名空间

Question

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

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

问题是当我访问它时。在 this question 的帮助下我发现我可以通过使用它来访问索引内的键，如下所示:

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

问题是前缀 index. 似乎相当不必要到我想访问的每个键。我想做的是导入命名空间索引而不是契约(Contract)，并按如下方式使用它:

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

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

Answer 1

Nested namespaces are not supported .
您可以装饰useTranslation钩子(Hook)为命名空间中的页面提供此扩展功能。

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>
}