在React中插入HTML换行符（<br/>）的正确方法与注意事项

）的正确方法与注意事项 ” />

本文旨在解决React中直接在字符串中插入HTML换行符（
）时，标签被转义的问题。我们将探讨两种主要方法：一是推荐的直接在JSX中嵌入
标签，此为React的标准处理方式；二是利用dangerouslySetInnerHTML属性来渲染原始HTML字符串，但会强调其潜在的安全风险，并建议仅在必要且内容可信时使用。通过本文，读者将掌握在React应用中有效且安全地处理HTML换行符的技巧。

理解React的字符串渲染行为

在react中，当您将一个字符串作为jsx元素的子节点时，react默认会对其进行转义处理。这意味着，像
这样的html标签在字符串中会被转换为其html实体编码（例如，
），从而避免浏览器将其解析为实际的html元素。这种行为是react为了防止跨站脚本（xss）攻击而采取的安全措施，确保了渲染内容的安全性。

例如，以下代码将不会按预期插入换行：

import './App.css';  export default function App() {   return (     <main>       {`aaaa <br />bbbb`} {/* <br /> 会被转义，显示为字面量 */}     </main>   ); }

渲染结果将是“aaaa
bbbb”，而不是带有换行的“aaaa”和“bbbb”。为了在React中正确插入换行符，我们需要采用不同的方法。

方法一：直接在JSX中嵌入
标签（推荐）

最直接、最安全且推荐的方式是直接在JSX中将
作为独立的JSX元素使用，而不是将其作为字符串的一部分。React能够识别并正确渲染JSX元素，从而在DOM中创建实际的换行标签。

import './App.css';  export default function App() {   return (     <main>       aaaa <br/> {/* 直接使用 JSX <br/> 标签 */}       bbbb     </main>   ); }

优点：

立即学习“前端免费学习笔记（深入）”；

• 安全性高： React会正确处理JSX元素，不会引入XSS风险。
• 符合React范式： 这是React组件化和声明式UI的自然方式。
• 可读性好： 代码结构清晰，易于理解。

适用场景： 当您希望在固定文本内容中插入换行时，这是首选方法。

方法二：使用dangerouslySetInnerHTML渲染原始HTML（谨慎使用）

在某些特定情况下，例如您从后端API获取了包含HTML标签（如
、、等）的富文本字符串，并且需要将其原样渲染到DOM中时，可以使用dangerouslySetInnerHTML属性。这个属性允许您将一个HTML字符串直接注入到DOM元素中。

重要警告： dangerouslySetInnerHTML的名称已经暗示了其潜在的危险性。使用此属性意味着您放弃了React内置的XSS保护。如果注入的HTML字符串来源于用户输入或任何不可信的来源，恶意用户可能会注入恶意脚本，从而导致XSS攻击。因此，除非您完全信任内容来源并已对内容进行了严格的净化处理，否则请避免使用此方法。

import './App.css';  export default function App() {   const htmlContent = 'aaaa <br />bbbb'; // 假设这是从API获取的原始HTML字符串    return (     <main dangerouslySetInnerHTML={{__html: htmlContent}} />   ); }

注意事项：

• 对象结构： dangerouslySetInnerHTML属性需要一个对象作为值，该对象必须包含一个名为__html的键，其值是您要渲染的HTML字符串。
• 安全风险： 再次强调，在使用此方法时，务必对htmlContent进行严格的输入验证和净化（sanitization），以防止潜在的XSS攻击。可以使用DOMPurify等库来净化HTML。

适用场景：

• 渲染来自富文本编辑器（如TinyMCE, Quill）或Markdown解析器生成的HTML内容。
• 显示来自可信后端，且已确认安全无害的HTML片段。

总结与最佳实践

在React中处理换行符，应遵循以下原则：

1. 首选直接嵌入JSX
   标签： 这是最安全、最符合React设计理念的方式，适用于大部分需要插入换行的场景。

   <p>第一行文本<br/>第二行文本</p>
2. 谨慎使用 dangerouslySetInnerHTML： 仅当您确实需要渲染包含HTML标签的原始字符串时才考虑使用此方法。在使用前，务必确保内容来源可信，并强烈建议对内容进行净化处理，以防范XSS攻击。

   // 假设 contentHtml 已经过安全净化 <div dangerouslySetInnerHTML={{ __html: contentHtml }} />

通过理解React的渲染机制和两种方法的优缺点，您可以根据具体需求选择最合适且最安全的方式来在React应用中插入HTML换行符。