在React组件中如何正确添加版权符号？

原因 #

React 出于 XSS 安全防护的默认规则，会自动转义 JSX 中的 HTML 实体字符串，因此你写的©不会被解析为版权符号，只会原样输出。原生 HTML 没有这个转义规则，所以在 HTML 编辑器中可以正常生效。

可用解决方案 #

• 方案1：直接写入版权符号本身
  现在绝大多数开发环境和浏览器都完美支持 UTF-8 编码，直接写©是最简单稳妥的方案：

  function Footer() {
    return (
      <footer>
        <p>©</p>
      </footer>
    );
  }
  

• 方案2：使用 Unicode 转义序列
  版权符号对应的 Unicode 编码为\u00A9，在 JSX 中插入该转义字符即可：

  function Footer() {
    return (
      <footer>
        <p>{'\u00A9'}</p>
      </footer>
    );
  }
  

• 方案3：强制解析HTML实体（不推荐，仅做参考）
  如果你必须沿用 HTML 实体的写法，可以使用dangerouslySetInnerHTML强制跳过 React 的转义规则，注意该方法存在 XSS 风险，仅当你完全信任插入的内容时再使用：

  function Footer() {
    return (
      <footer>
        <p dangerouslySetInnerHTML={{__html: '&copy;'}} />
      </footer>
    );
  }
  

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