如何在React JSX中正确插入HTML换行标签<br/>

” />

本文详细介绍了在React应用中插入HTML换行标签
的两种主要方法。首先，推荐直接在JSX中以组件形式插入
，这是一种安全且符合React惯例的做法。其次，针对需要渲染包含HTML内容的字符串场景，文章也探讨了如何使用dangerouslySetInnerHTML，并着重强调了其潜在的安全风险及使用时的注意事项，旨在帮助开发者选择最适合且安全的方式处理换行符。

在react开发中，开发者有时会遇到需要在文本中插入html换行标签
的需求。然而，由于jsx的特性，直接将
作为字符串的一部分并不能正确渲染为换行符。本文将详细阐述两种正确处理这种情况的方法。

1. 直接在JSX中插入换行符

当我们需要在React组件中简单地插入一个换行符时，最推荐且最安全的方式是直接将
标签作为JSX元素的一部分放置在需要换行的位置。React的JSX语法允许我们像编写HTML一样直接使用HTML标签。

问题分析：

原始代码尝试将
作为字符串的一部分嵌入：

export default function App() {   return (     <main>       {`aaaa <br />bbbb`}     </main>   ); }

这种写法的问题在于，花括号{}内部的内容会被JavaScript解释为字符串字面量。因此，’aaaa
bbbb’会被React渲染为一个普通的字符串，
不会被解析为HTML标签，而是直接显示在页面上。

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

解决方案：

正确的做法是将
作为一个独立的JSX元素插入到文本流中。

import './App.css';  export default function App() {   return (     <main>       aaaa <br/>       bbbb     </main>   ); }

示例代码：

import React from 'react'; import './App.css'; // 假设有App.css  export default function App() {   return (     <main>       <p>         这是第一行文本。         <br/>         这是第二行文本。       </p>       <div>         用户名: John Doe         <br/>         邮箱: john.doe@example.com       </div>     </main>   ); }

注意事项：

• 这种方法是React官方推荐的，因为它直接利用了JSX的特性，将
  视为一个DOM元素来处理。
• 它非常安全，不会引入任何跨站脚本攻击（XSS）的风险，因为React会自动对插入的内容进行编码。
• 适用于内容是静态的或已知且受控的场景。

2. 使用dangerouslySetInnerHTML处理HTML字符串

在某些特定场景下，我们可能需要渲染一段包含HTML标签（包括
）的完整HTML字符串，例如从后端API获取的富文本内容。在这种情况下，React提供了一个名为dangerouslySetInnerHTML的属性。

解决方案：

dangerouslySetInnerHTML是React中用于设置元素内容的属性，其工作方式类似于浏览器DOM中的innerHTML。它的名称中包含“dangerously”一词，是为了提醒开发者在使用时需要格外小心。

import './App.css';  export default function App() {   const htmlContent = '这是第一行内容。<br />这是第二行内容。<b>加粗文本</b>';    return (     <main dangerouslySetInnerHTML={{__html: htmlContent}} />   ); }

示例代码：

import React from 'react'; import './App.css'; // 假设有App.css  export default function App() {   const rawHtmlString = '这是一段来自服务器的HTML内容。<br/>其中包含<b>加粗文本</b>和<i>斜体文本</i>。';    return (     <div className="content-wrapper">       <h2>动态HTML内容示例</h2>       <div dangerouslySetInnerHTML={{ __html: rawHtmlString }} />       <p>请注意：上方内容是通过dangerouslySetInnerHTML渲染的。</p>     </div>   ); }

重要注意事项：

• 安全风险（XSS）： dangerouslySetInnerHTML是React中一个潜在的安全漏洞。如果__html属性的值来自不受信任的用户输入，攻击者可以注入恶意脚本，从而导致跨站脚本攻击（XSS）。

• 数据净化： 在使用dangerouslySetInnerHTML之前，务必对所有来自外部（尤其是用户输入）的HTML内容进行严格的净化（Sanitization）。可以使用成熟的库，如DOMPurify，来清除潜在的恶意代码。

  import DOMPurify from 'dompurify';  // ... const uncleanHtml = '@@##@@<p>安全内容</p>'; const cleanHtml = DOMPurify.sanitize(uncleanHtml);  return (   <div dangerouslySetInnerHTML={{ __html: cleanHtml }} /> );

• 避免滥用： 除非确实需要渲染复杂的、包含HTML结构的字符串，否则应尽量避免使用dangerouslySetInnerHTML。对于简单的文本和换行，直接在JSX中插入
  是更好的选择。

总结与最佳实践

在React中处理HTML换行标签
，应根据具体场景选择合适的方法：

1. 首选直接在JSX中插入
   ： 对于静态或已知文本中的简单换行，直接在JSX中写入
   是最安全、最符合React惯例且性能最佳的方式。

   <p>第一行文本<br/>第二行文本</p>
2. 谨慎使用dangerouslySetInnerHTML： 仅当必须渲染包含HTML标签的完整字符串时才考虑使用此方法。在使用前，务必对内容进行严格的净化处理，以防范XSS攻击。

   <div dangerouslySetInnerHTML={{ __html: sanitizedHtmlContent }} />

遵循这些实践，可以确保您的React应用在处理HTML换行符时既安全又高效。