在React中插入HTML换行符（）的正确方法与注意事项-js教程-PHP中文网

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

DDD

发布： 2025-08-11 21:24:01

原创

308人浏览过

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

本文旨在解决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元素中。

天谱乐

唱鸭旗下AI音乐创作平台，为您提供个性化音乐创作体验！

514

查看详情

重要警告： 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中处理换行符，应遵循以下原则：

首选直接嵌入JSX 标签： 这是最安全、最符合React设计理念的方式，适用于大部分需要插入换行的场景。
```
第一行文本 第二行文本
```
登录后复制
谨慎使用 dangerouslySetInnerHTML： 仅当您确实需要渲染包含HTML标签的原始字符串时才考虑使用此方法。在使用前，务必确保内容来源可信，并强烈建议对内容进行净化处理，以防范XSS攻击。
```
// 假设 contentHtml 已经过安全净化
<div dangerouslySetInnerHTML={{ __html: contentHtml }} />
```
登录后复制

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

以上就是在React中插入HTML换行符（）的正确方法与注意事项的详细内容，更多请关注php中文网其它相关文章！