如何在React应用的JSX中使用转义字符？求可行实现方法

嘿，我之前也在React里纠结过转义字符的问题！其实不同场景下有对应的处理方法，我把常用的几种方案分享给你：

1. 渲染HTML特殊字符（<、>、&等） #

React默认会自动转义这些字符来避免XSS攻击，但如果需要显示原始的特殊字符，有两种常用方式：

• 直接使用HTML实体：比如要显示<就写<，显示&就写&，示例代码：

// 会渲染成 <Hello World>
<div>&lt;Hello World&gt;</div>

• 使用dangerouslySetInnerHTML（谨慎使用）：如果你需要渲染包含HTML标签或特殊字符的原始字符串，可以用这个属性，但一定要确保内容是完全可信的，避免注入风险：

const rawText = "<strong>这是加粗的文本&符号</strong>";
// 会渲染成带加粗效果的文本和&符号
<div dangerouslySetInnerHTML={{ __html: rawText }} />

2. 处理字符串里的转义序列（换行、引号等） #

这种场景和普通JavaScript的处理逻辑一致，React会正常解析转义符：

• 换行符\n：配合CSS的white-space: pre-line可以让换行生效：

const multiLineText = "第一行内容\n第二行内容\n第三行内容";
<div style={{ whiteSpace: 'pre-line' }}>{multiLineText}</div>

• 引号转义：如果字符串里包含和外层包裹相同的引号，用\转义即可，或者换一种引号包裹字符串：

// 两种写法都可以
const quotedText = '他说："React转义其实不难！"';
const quotedText2 = "他说：\"React转义其实不难！\"";
<div>{quotedText}</div>

3. 渲染Unicode特殊字符 #

如果需要显示emoji、版权符号这类特殊字符，可以直接写Unicode编码或者直接输入字符：

// 两种方式都能渲染版权符号©
<div>版权所有 \u00A9 2024</div>
<div>版权所有 © 2024</div>

// 渲染emoji
<div>React开发很有趣 😊</div>

小提醒 #

React的JSX会自动转义{}中的表达式内容，比如{"<script>"}会被转义成<script>，这是默认的安全机制，除非你明确需要绕过，否则不要随便用dangerouslySetInnerHTML哦！

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