React中含\n的字符串在<p>标签内无法换行，如何解决？

有两种实用方案可以解决这个问题，无需直接修改原字符串：

方案一：用CSS样式控制换行 #

给<p>标签添加white-space样式，让浏览器识别\n为换行符：

1. 定义CSS类：

.msg-paragraph {
  white-space: pre-wrap; /* 保留换行，同时自动换行过长内容，不会溢出容器 */
  /* 若不需要保留连续空格，可改用 white-space: pre-line; */
}

2. React组件中使用：

<p className="msg-paragraph">{mess}</p>

这种方法最简洁，不需要处理字符串本身，适合大多数场景。

方案二：分割字符串并插入<br /> #

将原字符串按\n分割成数组，再映射为带换行标签的元素：

<p>
  {mess.split('\n').map((line, idx) => (
    <React.Fragment key={idx}>
      {line}
      {idx !== mess.split('\n').length - 1 && <br />}
    </React.Fragment>
  ))}
</p>

注意给映射元素添加唯一key（如果行内容有唯一标识优先用内容，否则用idx临时替代），避免React渲染警告。这种方法适合需要对每一行内容做额外处理的场景。

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