如何在翻译过程中将 Trans 组件用于粗体或斜体文本

Question

之前有人问过这个问题，但由于缺少信誉点，我无法对现有帖子发表评论，所以我提出了自己的问题。

我很难理解如何正确使用 Trans 组件，因为我发现它的文档页面有点缺乏和不清楚。

我想在我的 JSON 字符串中使用嵌套的粗体或斜体文本。对于上下文，我有一个名为“homepage.json”的翻译文件，我将其保存在我的 React 应用程序的 public/locales/en/ 子目录中，使用的格式如下：

{
"main": {
    "paragraph-text": "Lorem ipsum dolor sit, <1>amet consectetur adipisicing elit</1>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
    }
}

我的 Trans 组件如下所示：

<Trans i18nKey={"homepage.main.paragraph-text"}>
    Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>

当我尝试为 homepage.json 创建一个法语翻译文件时，在 public/locales/fr/ 下使用与英语对应的完全相同的格式，在语言之间切换时库没有使用法语文本。

This answer seems to describe exactly what I want to achieve，我已尝试将概述的解决方案实施到我的应用程序中，但我的 Trans 组件实例似乎无法找到我传递给它的 i18nkey 值。

Answer 1

问题已解决。问题是我没有将翻译文件的命名空间正确传递给 Trans 组件。

根据我上面的示例，使用 Trans 的正确方法是：

const { t } = useTranslation('myNamespace')
<Trans t={t} i18nKey={"main.paragraph-text"}>
    Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>

连同 JSON 文件中的正确用法：

{
"main": {
    "paragraph-text": "Lorem ipsum dolor sit, <0>amet consectetur adipisicing elit</0>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
    }
}

如何在翻译过程中将 Trans 组件用于粗体或斜体文本

How to use the Trans component for bold or italicized text in the middle of a translation

i18next

reactjs

react-i18next