React中的HTML转义写法

本文详细介绍了在JSX中正确输出特殊字符的方法,包括直接使用UTF-8字符、使用Unicode码、利用fromCharCode方法及使用dangerouslySetInnerHTML属性等技巧,并对比了不同方法的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在JSX中输出固定内容

  1. 直接使用UTF-8字符

    <div>版权 ©</div>
  2. 使用HTML转义字符

    <div>版权 &copy;</div>

    或者十进制的转义字符

    <div>版权 &#169;</div>

动态内容的转义

但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。

<div>{'版权 &#169;'}</div>

错误输出

版权 &#169;

正确写法:

  1. 直接使用UTF-8字符仍然可以正确输出

    <div>{'版权 ©'}</div>
  2. 安全的做法是使用对应的Unicode码

    <div>{'版权 \u00a9'}</div>
  3. 使用fromCharCode

    <div>{'版权 ' + String.fromCharCode(169)}</div>
  4. 使用数组组装

    <div>{['版权 ', <span>&#169;</span>]}</div>
  5. 使用dangerouslySetInnerHTML,可以避免React转义字符

    <div dangerouslySetInnerHTML={{ __html: '版权 &#169;' }} />

参考

  1. JSX Gotchas
  2. 深入react技术栈
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值