如何在 React 中使用 dangerouslySetInnerHTML 传递样式答案

【问题标题】：how to pass style using dangerouslySetInnerHTML in React如何在 React 中使用 dangerouslySetInnerHTML 传递样式
【发布时间】：2021-07-07 07:10:23
【问题描述】：

我正在使用危险的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！任何解决方案表示赞赏，谢谢。

【问题讨论】：

你想传递什么风格？请添加到您的问题

标签： javascript reactjs

【解决方案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 本身中包含它们的样式。

【讨论】：

【解决方案2】：

由于我从 API 获取 HTML，我在数据库中将 HTML 的样式属性设置为静态值，并在我的组件中替换了来自 API 的静态值！

【讨论】：

在 React 中使用 dangerouslySetInnerHTML 是危险的。 :-D
@AmirRezvani 为什么？
@knernay stackoverflow.com/questions/29044518/… betterprogramming.pub/…

【解决方案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}
/>

这假设您只想为容器的第一个子项设置样式，但您可以对多个子项使用类似的方法。

【讨论】：