將 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>