我正在尝试使用react-i18next包含一些 HTML 标签的翻译 json，如下所示：

// en.json
{ "welcome": "Welcome to our site, <strong>{{name}}</strong>" }

在我的 React 组件中，我希望字符串像这样呈现。

欢迎来到我们的网站，约翰

使用该useTranslation函数通常会按字面意思打印字符串，而不会将其解释为 HTML，例如Welcome to our site, <strong>John</strong>.

import React from 'react'
import { useTranslation } from 'react-i18next'

const App = () => {
  const { t } = useTranslation()

  return(
    <div>{t('welcome', { name: 'John' })}</div>
  )
}

我将其替换为dangerouslySetInnerHTML并正确呈现。

<div dangerouslySetInnerHTML={{ __html: t('welcome', { name: 'John' }) }}></div>

但是，dangerouslySetInnerHTML如果可能的话，我想避免使用。我在文档中读到你可以使用称为 Trans 组件的东西来翻译 HTML 标签。

文档：在翻译中使用 for<br />和其他简单的 html 元素 (v10.4.0)

但是我对如何使用它们感到困惑，因为它们显示的示例似乎是用于替换占位符标签，例如<1>用实际标签（如<br />. 有没有办法使用 Trans 组件（或其他一些不使用的方法dangerouslySetInnerHTML）来将翻译后的字符串解释为 HTML？

提前致谢。