JSX模板字符串内使用双引号时文本内容与服务端渲染HTML不匹配

问题场景 #

在JSX的<style>标签内使用模板字符串时，若用""作为CSS content属性的值，会触发客户端与服务端渲染内容不匹配的报错，控制台提示如下：

问题代码示例：

<div>
  <style>{`
    p::before {
      content: &quot;&quot;;
    }
  `}</style>
  <p>Hello World.</p>
</div>

原因分析 #

服务端渲染时，""会被HTML解析器转换为""；但客户端处理JSX模板字符串时，会将""作为字面量保留，导致两端渲染的内容不一致，触发React的hydration校验错误。

解决方法 #

方法1：使用单引号代替转义双引号 #

CSS的content属性支持单引号作为值的包裹符，直接替换即可：

<div>
  <style>{`
    p::before {
      content: '';
    }
  `}</style>
  <p>Hello World.</p>
</div>

方法2：直接使用未转义的双引号 #

由于模板字符串用反引号（`）包裹，内部的双引号不需要转义，直接写入即可：

<div>
  <style>{`
    p::before {
      content: "";
    }
  `}</style>
  <p>Hello World.</p>
</div>

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