Question

我正在使用危险的SetInnerHTML格式将HTML注入我的react组件中：

<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

我通过向容器添加 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 3

自从API获得HTML以来，我在数据库中为HTML设置了样式属性并带有静态值，并在组件中替换了来自API的静态值！

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

3 个答案: