如何使用 react-i18next 动态设置 {t('key', {value})} 的键

Question

我正在用 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": "我的"
}

Answer 1

在 t 函数中，您可以使用 ${item} 或 [item] 动态调用该值，因为 {item} 将不起作用。希望这对您有所帮助。

如何使用 react-i18next 动态设置 {t('key', {value})} 的键

How do I set the key of {t('key', {value})} dynamically with react-i18next

reactjs

internationalization

i18next

react-i18next