如何在翻译过程中使用粗体或斜体文本的翻译组件



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

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

我正在尝试在JSON字符串中使用嵌套的粗体或斜体文本。对于上下文,我有一个名为";homepage.json";我将其保存在React应用程序的public/locates/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/locates/fr/下,同时使用与英语完全相同的格式,当在不同语言之间切换时,库没有使用法语文本。

这个答案似乎准确地描述了我想要实现的目标,我已经尝试将概述的解决方案实现到我的应用程序中,但我的Trans组件实例似乎无法定位我传递给它的i18nkey值。

解决了问题。问题是我没有正确地将翻译文件的命名空间传递给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."
}
}

最新更新