React组件中换行转义字符\n为何无法生效？

这是个很常见的React渲染文本的小坑，我来给你拆解一下原因和解决办法：

当你用模板字符串生成带\n的文本并直接在React组件中渲染时，HTML会将换行符视为空白字符并自动合并，所以页面上只会显示一个空格，不会真正换行。React默认是把文本内容当作HTML文本流处理的，而不是预格式化的文本。

这里有几种常用的方案，你可以根据场景选择：

1. 使用<br />标签代替\n #

把模板字符串里的\n换成<br />，但要注意安全地渲染：

// 方法A：用JSX直接拼接（最安全）
const modalContent = () => (
  <>
    First line.
    <br />
    Second line?
  </>
);
// 直接渲染
<div>{modalContent()}</div>

// 方法B：用dangerouslySetInnerHTML（仅当内容完全可信时使用，避免XSS风险）
const modalContent = () => `First line.<br />Second line?`;
// 渲染时
<div dangerouslySetInnerHTML={{ __html: modalContent() }} />

2. 用CSS的white-space: pre-wrap样式 #

给渲染文本的元素加上CSS样式，让浏览器保留换行和空格：

const modalContent = () => `First line.\nSecond line?`;
// 渲染时
<div style={{ whiteSpace: 'pre-wrap' }}>{modalContent()}</div>

这种方法适合需要保留原始文本格式（比如多行代码、用户输入的换行）的场景，而且不需要修改文本内容，省心又方便。

3. 把文本拆分成数组，用<br />分隔 #

把字符串按\n分割成数组，然后用<br />连接每个元素：

const modalContent = () => 
  `First line.\nSecond line?`.split('\n').map((line, index) => (
    <React.Fragment key={index}>
      {line}
      {index !== line.length - 1 && <br />}
    </React.Fragment>
  ));
// 直接渲染
<div>{modalContent()}</div>

这种方法比较灵活，还能在每行之间添加自定义内容，比如分隔线之类的。

如果只是简单的换行需求，用CSS的white-space: pre-wrap最省心；如果需要更精细的控制或者避免dangerouslySetInnerHTML，就用JSX拼接或者数组拆分的方法。

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