React使用dangerouslySetInnerHTML时内部标签className不生效如何解决

问题原因 #

className是React JSX语法中专属的类名属性名，仅在JSX编译阶段会被转换为原生HTML的class属性。而你通过dangerouslySetInnerHTML注入的字符串会被浏览器直接当做原生HTML解析，不会走JSX的编译转换逻辑，因此浏览器无法识别className属性，对应的样式自然不会生效。

解决方案 #

把替换逻辑里生成的HTML字符串中的className改为原生HTML的class属性即可，修改后的代码如下：

const handleAddingHighlight = (data) => {
  let changeAT = data.replaceAll(`@`, `<span class="contentDescHighlighted">`)
  let changePercentage = changeAT.replaceAll(`%`, `<span class="contentDescHighlighted content_bold">`)
  let highlightedData = changePercentage.replaceAll(`#`, `</span>`); 
  console.log(highlightedData)

  return highlightedData
}

如果你的项目使用了CSS Modules、CSS-in-JS等生成动态哈希类名的方案，还需要确保注入的HTML字符串里的类名和实际编译生成的哈希类名保持一致。

内容的提问来源于stack exchange，提问作者lala