在 json 转换字符串中添加 span 标记

Question

我有一个带有JP/EN语言选项的反应应用程序。我以这种格式处理我们的副本和文本。

<TopHeading>
{t('landingTitle')}
</TopHeading>
<SubHeading>
{t('landingCatchCopy')}
</SubHeading>

然后管理json文件中的翻译字符串，如下所示

"landingTitle": "Portfolio made easy.",
"landingCatchCopy": "Creators must-have, without a hassle.",

现在，我想在文本的所需部分包含<span>标签，以便我可以负责任地放置换行符以适合查看器屏幕中的文本。

我怎样才能做到这一点？任何提示将不胜感激！ 提前感谢您抽出宝贵时间！

Answer 1

如果要加载HTML标签，请使用dangerouslySetInnerHTML.

<TopHeading>
<div dangerouslySetInnerHTML={{ __html: t('landingTitle') }}></div>
</TopHeading>
<SubHeading>
<div dangerouslySetInnerHTML={{ __html: t('landingCatchCopy') }}></div>
</SubHeading>

管理JSON文件中的翻译字符串，如下所示

"landingTitle": "Portfolio made easy.",
"landingCatchCopy": "<span>Creators must-have,</span><br/><span>without a hassle.</span>",

希望这对你有用！