css - 将 className 属性添加到 dangerouslySetInnerHTML 内容

Question

如何为包含 'hello world' 的 div 指定 className 属性:

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

一种方法是设置为外部 div，如下所示:

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

然后在 css 样式中 child :

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

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

编辑:将类名添加到注入(inject)的 html 并不能解决问题，例如:

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

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

Answer 1

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

我们必须使用两个 react 钩子(Hook)

1. useRef
2. useLayoutEffect

基本上根据文档，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>'}} />
)