本教程旨在解决在 JSX 中渲染换行符的常见问题，特别是当字符串数据包含 `\n` 字符时。文章将深入探讨为什么 `\n` 默认无法在 JSX 中创建视觉换行，并提供两种主要解决方案：利用 HTML 的 `
` 标签进行显式换行，以及通过 CSS 的 `white-space` 属性来正确解析 `\n` 字符，同时提供实用的代码示例和注意事项。
在构建现代 Web 应用程序时，尤其是在使用 React、Next.js 和 TypeScript 等技术栈时，我们经常需要从外部文件、API 或状态管理中获取文本内容。这些文本内容可能包含换行符（\n），以期望在 UI 上显示为多行文本。然而，直接将包含 \n 的字符串渲染到 JSX 元素中，往往会发现 \n 字符并没有按照预期生成视觉上的换行。
理解 \n 在 JSX 中的默认行为
在 JSX 中，\n 字符被浏览器和 React 引擎视为普通的空白字符，而不是一个强制的换行指令。这意味着，无论你的字符串中包含多少个 \n，它们最终都会被折叠成一个空格（或被完全忽略，取决于上下文），除非该元素具有特殊的 CSS 样式或被包裹在
标签中。考虑以下常见的场景：
// settings.ts export const appText = '这是我的第一行文本。\n这是我的第二行文本。'; // MyComponent.tsx import React from 'react'; import { appText } from './settings'; function MyComponent() { return (); } export default MyComponent;{appText}
在上述代码中，尽管 appText 字符串中包含了 \n，但渲染到页面上时，你可能会看到文本显示为一行："这是我的第一行文本。 这是我的第二行文本。"
解决方案一：利用 HTML
标签最直接的解决方案是使用 HTML 的
标签。
标签是 HTML 中用于创建换行符的标准方式。如果你的文本内容需要明确的换行控制，并且可能涉及其他 HTML 格式，那么将 \n 替换为
是一个可行的方法。实现步骤：
- 替换 \n 为
： 在将字符串渲染到 JSX 之前，对字符串进行处理，将其中的 \n 字符替换为
标签。- 使用 dangerouslySetInnerHTML 渲染： 由于
是 HTML 标签，而不是纯文本，因此不能直接将其放入 JSX 的 {} 中。你需要使用 React 提供的 dangerouslySetInnerHTML 属性来告知 React 将该字符串作为 HTML 进行解析和渲染。// settings.ts export const appTextWithNewlines = '这是我的第一行文本。\n这是我的第二行文本。'; // MyComponent.tsx import React from 'react'; import { appTextWithNewlines } from './settings'; function MyComponent() { const formatTextWithBr = (text: string) => { // 将 \n 替换为
标签 return text.split('\n').map((item, key) => ({item} {key < text.split('\n').length - 1 && )); }; // 或者，如果内容是纯文本且需要直接渲染为HTML const formatTextAsHtml = (text: string) => { return { __html: text.replace(/\n/g, '
}
') }; }; return ({/* 方式一：通过映射数组渲染); } export default MyComponent;
组件 */}使用组件方式渲染
{formatTextWithBr(appTextWithNewlines)}
{/* 方式二：使用 dangerouslySetInnerHTML 渲染 HTML 字符串 */}使用 dangerouslySetInnerHTML 渲染
注意事项：
- dangerouslySetInnerHTML 的安全风险： dangerouslySetInnerHTML 是一个强大的工具，但它的名称也暗示了其潜在的危险性。如果传入的 HTML 字符串来源于用户输入或其他不可信的来源，可能会导致跨站脚本攻击（XSS）。务必确保所有通过 dangerouslySetInnerHTML 渲染的内容都经过了严格的净化和验证。
-
组件方式的优势： 在上面的 formatTextWithBr 示例中，我们通过 split('\n') 将字符串分割成数组，然后使用 map 方法在每个文本片段后插入
组件。这种方式避免了 dangerouslySetInnerHTML，更加安全，并且允许 React 对每个片段进行更细粒度的控制。
解决方案二：利用 CSS white-space 属性
对于主要由纯文本组成，且仅需将 \n 字符解析为换行符的场景，CSS 的 white-space 属性提供了一个更简洁、更安全的解决方案。通过设置 white-space: pre-wrap;，你可以指示浏览器保留文本中的所有空白字符（包括换行符），并且在需要时自动换行。
实现步骤：
- 定义 CSS 样式： 在你的 CSS 文件或组件的样式中，为包含文本的元素添加 white-space: pre-wrap; 样式。
- 应用样式： 将该样式应用到你的 JSX 元素上。
// settings.ts
export const appTextWithNewlines = '这是我的第一行文本。\n这是我的第二行文本。';
// MyComponent.tsx
import React from 'react';
import { appTextWithNewlines } from './settings';
function MyComponent() {
const textStyle: React.CSSProperties = {
whiteSpace: 'pre-wrap', // 保留空白符和换行符，并自动换行
};
return (
使用 CSS `white-space` 渲染
{appTextWithNewlines}
{/* 也可以通过外部 CSS 类 */}
{/* {appTextWithNewlines}
*/}
);
}
export default MyComponent;
// 假设有一个 styles.css 文件
/*
.pre-wrap-text {
white-space: pre-wrap;
}
*/white-space 属性值说明：
- normal (默认): 连续的空白符会被合并，换行符会被忽略。
- nowrap: 连续的空白符会被合并，换行符会被忽略。文本不会自动换行。
- pre: 连续的空白符和换行符都会被保留。文本不会自动换行。
- pre-wrap: 连续的空白符和换行符都会被保留。文本会在需要时自动换行。
- pre-line: 连续的空白符会被合并，但换行符会被保留。文本会在需要时自动换行。
对于在文本中正确显示 \n 字符并允许文本自动换行，pre-wrap 是最常用的选择。
总结与最佳实践
选择哪种方法取决于你的具体需求和内容的性质：
- 对于纯文本内容，仅需将 \n 解释为换行： 强烈推荐使用 CSS white-space: pre-wrap;。 这种方法最安全、最简洁，并且符合 CSS 样式控制文本布局的理念。
- 对于包含少量 \n 且需要精确控制换行，或内容可能包含其他简单 HTML 标签（如 ）的情况： 可以考虑通过 split('\n').map(...) 的方式动态插入
组件。这种方法既安全又灵活。 -
对于内容本身就是一段包含复杂 HTML 结构（包括
）的字符串，并且确信内容来源安全： 可以使用 dangerouslySetInnerHTML。但请务必对其来源进行严格的验证和净化，以防止安全漏洞。
通过理解 JSX 处理空白字符的机制，并合理运用
标签或 white-space CSS 属性，你可以有效地在 React、Next.js 和 TypeScript 应用程序中管理和渲染文本中的换行符。
