以前有人问过这个问题,但由于缺乏信誉点,我无法对现有帖子发表评论,所以我自己提出了问题。
我很难理解如何正确使用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."
}
}