如何在 React 中使用 dangerouslySetInnerHTML 傳遞樣式

Question

我正在使用危險的SetInnerHTML 以如下格式在我的反應組件中注入html：

<div 
    className="mt-2 col variant-attr-cell p-0" 
    dangerouslySetInnerHTML = { { 
        __html: JSON.parse(attrs[i].snippet).snippet.replace("{text}", 
        attrs[i].choices[j].visualization_data) 
    } } 
>
</div>

它工作正常，但我試圖同時將樣式傳遞給注入的 html 但不知道如何！ 我正在嘗試根據我得到的 api 向注入的 html 添加不同的樣式，如下所示：

height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;

僅供參考，注入的html主要是這樣的：

<span></span>

並且樣式必須添加到此而不是容器 div！ 任何解決方案表示贊賞，謝謝。

Answer 1

您仍然可以添加所需的樣式。 只需添加另一個道具style ：

const styleObj = {
  color: 'white',
  backgroundColor: 'red'
};


<div 
  className="mt-2 col variant-attr-cell p-0" 
  dangerouslySetInnerHTML = {
    { __html: JSON.parse(attrs[i].snippet).snippet
        .replace("{text}", attrs[i].choices[j].visualization_data)
     } 
   }
   style={styleObj}
>
</div>

如果您嘗試在 html 中的元素內添加樣式，那么您應該在 html 本身中包含它們的樣式。

Answer 2

由於我從 API 獲取 HTML，因此我在數據庫中將 HTML 的樣式屬性設置為靜態值，並在我的組件中替換了來自 API 的靜態值！

Answer 3

我設法通過向容器添加 ref 並使用 useLayoutEffect 鈎子來做到這一點。

const elRef = useRef();

useLayoutEffect(()=>{
  if (elRef.current){
    elRef.current.firstElementChild.style.height = '12px';
    // set other style attributes
    ...
  }
});

return <div
  ref={elRef}
  dangerouslySetInnerHTML={yourHTML}
/>

這假設您只想為容器的第一個子項設置樣式，但您可以對多個子項使用類似的方法。

Answer 4

您可以像這樣輕松地在危險HTML中設置元素樣式 style='background-color:red' 而不是 style={{backgroundColor:'red'}}