将 className 属性添加到 dangerouslySetInnerHTML 内容答案

【问题标题】：Add className attribute to dangerouslySetInnerHTML contents将 className 属性添加到 dangerouslySetInnerHTML 内容
【发布时间】：2019-04-08 14:22:05
【问题描述】：

如何为包含“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 模块的样式加载器）

【问题讨论】：

当你更新你的问题时，你能澄清一下你的类名是静态的还是动态的？
@lumio 动态，例如 CSS 模块将 className 转换成这样的：componentName_className__1eKtRuyKh

标签： css reactjs styling

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在 2 年后遇到了这个问题，我想获得完全相同的结果。我在这里没有找到任何准确的答案，但是感谢 @jash8506，感谢 answer 到 question 的精彩，我想出了一个解决方案。

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

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

我们可以访问容器div 中的firstChildElement 并向它的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>'}} />
)

【讨论】：