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

我在react组件中使用危险的LysetinerHTML注入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主要是这样的：

<span></span>

样式必须被添加到这个，而不是容器div！ 任何解决方案都值得赞赏，

---

谢谢。

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

样式

：

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>

const styleObj={
颜色：'白色'，
背景颜色：“红色”
};

---

如果您试图在驻留在html中的元素中添加样式，那么您应该在html本身中包含它们的样式。

因为我是从API中获取html的，所以我在数据库中使用静态值设置html的样式属性，并在我的组件中替换API中的静态值

你想通过什么样的考试？请在您的问题中添加使用危险的LysetinerHTML，因为React是危险的：-D

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>