将 className 属性添加到 risklySetInnerHTML 内容

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)
}

但我想将className直接设置为带有 'hello world' 的div

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

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

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

Answer 1

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

Answer 2

2 年后我遇到了这个问题，我想达到完全相同的结果。 我在这里没有找到任何准确的答案，但由于@jash8506对这个问题的出色回答，我想出了一个解决方案。

我们必须使用两个反应钩子

1. useRef
2. useLayoutEffect

根据文档， useRef可用于访问 React 中的 DOM 元素， useLayoutEffect可用于从 DOM 中读取布局并同步重新渲染。

我们可以访问firstChildElement容器div ，并添加类到它的classList

这是完成的代码的样子

const containerRef = useRef();

useLayoutEffect(()=>{
  if (containerRef.current){
    containerRef.current.firstElementChild.classList.add('class-name');
  }
});

return (
  <div ref={elRef} dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />
)

Answer 3

在继续阅读之前：问问自己为什么需要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>