我的应用程序相当大,所以为了有一个更有条理的翻译文件,我想使用 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
。在官方文档中,我没有找到任何关于嵌套的内容。是否有可能完成我正在尝试做的事情,或者我是否必须坚持为每个键添加前缀?
您可以装饰
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 中发现了类似于嵌套命名空间的东西。显然,您可以从翻译挂钩中获取一个新的翻译对象,如下所示:
const { t } = useTranslation('batch');
const nestedNamespace = t('id.someOtherSection', { returnObjects: true })
并且,要访问
nestedNamespace
的属性,您可以直接调用它,例如:
nestedNamespace.someTranslation -> THIS WORKS!!!
nestedNamespace('someTranslation') -> THIS WON'T WORK!