ReactJS中文本无法正常换行的问题排查及解决方案求助

React 为了默认防范 XSS 跨站脚本攻击，对所有直接嵌入 JSX 的字符串内容会做自动转义处理，所有 HTML 标签都会被当成普通纯文本渲染，不会被浏览器解析为DOM节点，因此你拼接的<br>标签会直接显示为文本，不会触发换行效果。

下面是3种常用的实现方案，推荐优先选择第2种，安全性最高且实现最简单：

方案1：使用 dangerouslySetInnerHTML 渲染原始HTML #

这是React提供的专门用来渲染原始HTML内容的API，仅适用于你要渲染的内容完全可控、没有用户输入的可信任内容，避免引入XSS风险。
修改后的代码示例：

export default function App() {
  let multilineString = `My
text
is
here`;

  let htmlText = multilineString.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
  return (
    <div className="App">
      {/* 用dangerouslySetInnerHTML渲染原始HTML */}
      <h1 dangerouslySetInnerHTML={{__html: htmlText}}></h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方案2：使用CSS white-space 属性实现（最推荐） #

不需要修改字符串，也不需要拼接HTML标签，只需要给包裹文本的元素添加对应CSS属性即可，完全规避XSS风险。
常用属性值：

• pre-line：合并连续空白符，识别换行符自动换行
• pre-wrap：保留连续空白符，识别换行符自动换行
  修改后的代码示例：

export default function App() {
  let multilineString = `My
text
is
here`;

  return (
    <div className="App">
      {/* 直接输出原始字符串，加CSS属性即可 */}
      <h1 style={{whiteSpace: 'pre-line'}}>{multilineString}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方案3：拆分字符串为元素数组渲染 #

将多行字符串按换行符拆分后，遍历生成带<br>标签的元素数组，不需要处理原始HTML，安全性高。
修改后的代码示例：

export default function App() {
  let multilineString = `My
text
is
here`;

  return (
    <div className="App">
      <h1>
        {
          multilineString.split(/\r?\n/).map((line, index) => (
            // 用Fragment包裹避免额外冗余节点
            <React.Fragment key={index}>
              {line}
              <br />
            </React.Fragment>
          ))
        }
      </h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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