i18n 中的嵌套命名空间

问题描述 投票:0回答:2

我的应用程序相当大,所以为了有一个更有条理的翻译文件,我想使用 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
。在官方文档中,我没有找到任何关于嵌套的内容。是否有可能完成我正在尝试做的事情,或者我是否必须坚持为每个键添加前缀?

javascript typescript internationalization i18next
2个回答
5
投票

不支持嵌套命名空间.

您可以装饰

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

0
投票

玩了一段时间后,我在 i18n 中发现了类似于嵌套命名空间的东西。显然,您可以从翻译挂钩中获取一个新的翻译对象,如下所示:

const { t } = useTranslation('batch');
const nestedNamespace = t('id.someOtherSection', { returnObjects: true })

并且,要访问

nestedNamespace
的属性,您可以直接调用它,例如:

nestedNamespace.someTranslation -> THIS WORKS!!!
nestedNamespace('someTranslation') -> THIS WON'T WORK!
© www.soinside.com 2019 - 2024. All rights reserved.