为什么样式不适用于angerlySetInnerHTML

Esc*_*nor 1 javascript i18next reactjs next.js

我需要使用 useTranslation 钩子和angerlySetInnerHTML 在组件中渲染一些样式化的jsx 标签,这些标签存储在json 文件中,我发现dangerouslySetInnerHTML 工作正常,但不要为每个标签应用顺风样式,

json 文件:

{
   "about-text":"<div className='text-blue px-5'><p>Text ...</p</div>",
}
Run Code Online (Sandbox Code Playgroud)

内部组件:

<div className="p-10">
<div
   dangerouslySetInnerHTML={{
      __html: t('about-text'),
    }}
   />
</div>
Run Code Online (Sandbox Code Playgroud)

Que*_*tin 8

dangerouslySetInnerHTML期望传递 HTML 字符串,而不是 JSX 字符串。

class直接使用该属性。您无法改为调整该className属性。