React中反引号包裹的HTML字符串内联CSS样式不生效如何解决

失效原因 #

你代码中使用的style={{fontSize: "25px"}}是JSX专属的样式语法规则，仅在JSX标签中可被React识别解析。而你通过模板字符串拼接生成的是原生HTML字符串，原生HTML的style属性仅接受CSS格式的字符串，不识别JS对象写法，因此浏览器无法解析对应的样式规则。
此外如果未使用dangerouslySetInnerHTML属性渲染HTML字符串，React会默认转义所有HTML标签，导致标签直接以文本形式展示，也会出现样式失效问题。

解决方案 #

方案一（推荐）：直接返回JSX元素 #

放弃使用模板字符串拼接HTML的写法，直接返回JSX元素，这是React框架下的标准实现方式，无需额外处理即可生效：

getCenterTextContent: (num, unit = '%') => {
  // 用空标签<></>包裹多个同级元素
  return (
    <>
      <span style={{fontSize: "25px"}}>{thisObject.state.num}{unit}</span>
      <br/><br/>
      <span style={{fontSize: "16px"}}>{thisObject.state.used}/{thisObject.state.total}</span>
    </>
  )
}

渲染时直接调用函数即可：

<div>{this.getCenterTextContent()}</div>

方案二：适配原生HTML字符串规则 #

如果业务场景要求必须传入HTML字符串（比如第三方组件只接受HTML字符串作为参数），需做两处修改：

1. 将style属性的JS对象写法改为原生CSS字符串写法，属性名用中划线格式（比如fontSize改为font-size），多个样式用分号分隔
2. 渲染时使用dangerouslySetInnerHTML属性让React解析HTML字符串

修改后的函数代码：

getCenterTextContent: (num, unit = '%') => {
    return `<span style="font-size: 25px;">${thisObject.state.num}${unit}</span><br/><br/><span style="font-size: 16px;">${thisObject.state.used}/${thisObject.state.total}</span>`;
}

渲染代码：

<div dangerouslySetInnerHTML={{__html: this.getCenterTextContent()}} />

注意：如果字符串中包含用户可自定义的输入内容，需提前做XSS过滤，避免安全风险。

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