我需要使用useTranslation钩子和dangerouslySetInnerHTML在我的组件中呈现一些样式化的jsx标记，这些标记存储在json文件中，我发现dangerouslySetInnerHTML工作的很好，但不为每个标记应用顺风样式，
json文件：
{
"about-text":"<div className='text-blue px-5'><p>Text ...</p</div>",
}内部组件：
<div className="p-10">
<div
dangerouslySetInnerHTML={{
__html: t('about-text'),
}}
/>
</div>
2条答案
按热度按时间pdsfdshx1#
dangerouslySetInnerHTML期望传递一个HTML字符串，而不是JSX字符串。class属性直接使用。您不能改为调整className属性。xhv8bpkk2#
这是一个为我工作的标签的例子，使用Tailwind：
<a class="hover:text-blue-600" href="some youtube link" target="_blank">https://.com</a>对于危险的SetInnerHTML CSS类，只需使用“class”而不是“className”即可。