将动态值传递到react-i18next useTranslate

Question

因此，我有一个从端点接收到的值，我想将其传递到我的翻译命令中。

这就是我目前拥有的：

${t('translation:user.form.placeholder')}

我希望能够做这样的事情：

${t('translation:user.form.${placeholder}')}

有办法做到这一点吗？如果需要的话，我很乐意为问题提供更清晰的信息。任何帮助将不胜感激。

Answer 1

看着这个问题，我假设您想用动态值插入字符串。比如说

{
    "translation:user.form": "Some text with {{dynamicValue}}"
}

这个

dynamicValue

可以替换为第二个参数

options

，即

string

或

TOptions<StringMap>

。

    const { t } = useTranslation();
    ...
    t('translation:user.form', {dynamicValue: 'Some value or variable'})

这是插值文档https://www.i18next.com/translation-function/interpolation

Answer 2

为了传递变量并使其可点击链接，库提供了一个 i18next 组件。您可以使用其中的链接并轻松传递变量。

https://react.i18next.com/latest/trans-component

以下示例来自文档，效果很好。

import { Trans } from 'react-i18next';
function MyComponent({ person, messages }) {`
  const { name } = person;`  
  const count = messages.length;
return(
    <Trans i18nKey="userMessagesUnread" count={count}>
      Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
    </Trans>
)