i18n 中的嵌套命名空间

Question

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

{
    "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。在官方文档中，我没有找到任何关于嵌套的内容。是否有可能完成我正在尝试做的事情，或者我是否必须坚持为每个键添加前缀？

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

i18n 中的嵌套命名空间

Nested namespaces in i18n

javascript

internationalization

typescript

i18next