如何使用 react-i18next 动态设置 {t('key', {value})} 的键
How do I set the key of {t('key', {value})} dynamically with react-i18next
我正在用 React 编写顶部导航栏,我正在尝试用 react-i18next 实现翻译。
一切正常,直到你尝试动态设置 {t('HOW DO I GET THIS DYNAMIC??'}
的密钥。
我遍历导航栏项目的数组,并为其中的每一项获取动态值并将其设置为 translation.json 内变量的值,但我无法创建密钥动态的,我试过 {item} 但没有用。
代码:
const { t } = useTranslation();
const menuItem = ['Pool', 'Mining', 'Leveraged', 'Lock up', 'Docs', 'Profile'];
{menuItem.map((item, idx) => (
<Link key={item} to="/">
<Button className={classes.item}>{t('HOW DO I GET THIS DYNAMIC??')}</Button>
</Link>
))}
这是英文翻译文件:
{
"Pool": "Pool",
"Mining": "Mining",
"Leveraged": "Leveraged",
"Lock up": "Lock Up",
"Docs": "Docs",
"Profile": "Profile"
}
Ant 这是我的 zh 翻译文件:
{
"Pool": "存款池",
"Mining": "存款挖矿",
"Leveraged": "杠杆挖矿",
"Lock up": "锁仓",
"Docs": "文档",
"Profile": "我的"
}
在 t
函数中,您可以使用 ${item}
或 [item]
动态调用该值,因为 {item}
将不起作用。希望这对您有所帮助。
我正在用 React 编写顶部导航栏,我正在尝试用 react-i18next 实现翻译。
一切正常,直到你尝试动态设置 {t('HOW DO I GET THIS DYNAMIC??'}
的密钥。
我遍历导航栏项目的数组,并为其中的每一项获取动态值并将其设置为 translation.json 内变量的值,但我无法创建密钥动态的,我试过 {item} 但没有用。
代码:
const { t } = useTranslation();
const menuItem = ['Pool', 'Mining', 'Leveraged', 'Lock up', 'Docs', 'Profile'];
{menuItem.map((item, idx) => (
<Link key={item} to="/">
<Button className={classes.item}>{t('HOW DO I GET THIS DYNAMIC??')}</Button>
</Link>
))}
这是英文翻译文件:
{
"Pool": "Pool",
"Mining": "Mining",
"Leveraged": "Leveraged",
"Lock up": "Lock Up",
"Docs": "Docs",
"Profile": "Profile"
}
Ant 这是我的 zh 翻译文件:
{
"Pool": "存款池",
"Mining": "存款挖矿",
"Leveraged": "杠杆挖矿",
"Lock up": "锁仓",
"Docs": "文档",
"Profile": "我的"
}
在 t
函数中,您可以使用 ${item}
或 [item]
动态调用该值,因为 {item}
将不起作用。希望这对您有所帮助。