i18n 翻译以粗体显示变量

Question

我正在尝试创建一个位于翻译字符串中间的变量，但我找不到解决方案。 我需要两种不同语言的所有翻译：“en”和“de”

我的代码如下所示：

import { useTranslation } from 'react-i18next'

const { t } = useTranslation('payment');

const companyName = 'Probando'

<Typography>{ t('setup with company name', <b>{companyName: companyName}</b>)</Typography>

我的翻译文件：

支付 en.json { "setup with company name": "Please contact {{ companyName }} to re-edit or re-send this invitation.", }

付款de.json： { "setup with company name": "Bitte wenden Sie sich an {{ companyName }} um diese Einladung nochmal zu bearbeiten oder neu zu erhalten." }

Answer 1

如果要在翻译中使用标签，则需要使用Trans 组件。

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

import { Trans } from 'react-i18next'

const { t } = useTranslation('payment');

<Trans t={t} i18nKey="setup with company name">
  Please contact <b>{{ companyName }}</b> to re-edit or re-send this invitation.
</Trans>

然后是这样的翻译：

// EN
"setup with company name": "Please contact <1>{{companyName}}</1> to re-edit or re-send this invitation.",

// DE
"setup with company name": "Bitte wenden Sie sich an <1>{{ companyName }}</1> um diese Einladung nochmal zu bearbeiten oder neu zu erhalten."