将className属性添加到dragonallySetInnerHTML内容

Question

如何为包含“ hello world”的div指定className属性：

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />

一种设置方法是像这样设置外部div：

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} className='class-name'/>

然后以CSS样式显示子项：

.class-name div {
  (css stuff here)
}

但是我想使用“ hello world”直接将className设置为div

编辑：将类名添加到注入的html不能解决问题，例如：

let content = '<div class="class-name">hello world</div>'
<div dangerouslySetInnerHTML={{__html: content}}

不起作用，因为如果多次使用相同的内容，则会发生css冲突（我正在使用CSS模块打开的样式加载器）

Answer 1

继续阅读之前，：问自己为什么需要dangerouslySetInnerHTML！这不是要使用的，如果是这样，请使用消毒剂。

/* React with HTML context */
<div dangerouslySetInnerHTML={{__html: '<div class="class-name">hello world</div>'}} />

您可以通过安全的方式简化此操作

/* React context only */
<div className="class-name">hello world</div>

Answer 2

<div className="post-excerpt" dangerouslySetInnerHTML={{ __html: post.excerpt}}/>