如何在 React 中使用危险的 SetInnerHTML 传递样式

IT技术 javascript reactjs
2021-05-06 12:35:44

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

3个回答

您仍然可以添加所需的样式。只需添加另一个propsstyle：

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 中拥有它们的样式。

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

我设法通过向容器添加 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}
/>

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

其它你可能感兴趣的问题
上一篇如何将 HTML 元素传递给 React 中的高阶函数 (HOC)？ 下一篇React Native onStartShouldSetResponder 和 onResponderRelease？