React中使用white-space: pre-line渲染Mongo API返回字符串失效问题

这个问题我之前踩过坑！核心问题出在从Express API获取的字符串里，换行符被转义成了字面量的\\n，而不是本地字符串中那种真正的换行符\n。

为什么会这样？ #

当你在Mongo中存储"Line 1\nLine 2"时，这个字符串里的\n是真正的换行控制字符。但通过Express API传输时，JSON序列化过程会自动转义特殊字符——把\n转换成\\n（也就是两个字符：反斜杠+n）。当前端拿到这个字符串时，它看到的不是换行指令，而是字面意义上的\n文本，自然white-space: pre-line无法识别并换行。

而本地字符串str="Line 1\nLine 2"里的\n是原生的换行符，浏览器能直接识别，所以样式生效。

验证方法 #

你可以在前端拿到API返回的字符串后，在控制台打印一下：

console.log(str);

如果输出是Line 1\nLine 2（显示为一行带\n文本），说明是转义后的字面量；如果输出是两行文本，那才是真正的换行符。

解决办法 #

方案1：前端处理（快速见效）

拿到字符串后，把所有字面量的\\n替换成真正的\n：

// 假设从API获取的字符串存在apiStr变量中
const processedStr = apiStr.replace(/\\n/g, '\n');

// 然后渲染
return <p>{processedStr}</p>;

方案2：后端优化（从根源解决）

在Express返回数据前，先修正字符串里的转义换行符，再用res.json()返回：

// 从Mongo查询到文档后
const doc = await YourModel.findOne({ /* 查询条件 */ });
// 修正转义的换行符
const correctedStr = doc.yourStringField.replace(/\\n/g, '\n');
// 返回处理后的字符串
res.json({ str: correctedStr });

另外也可以检查Mongo中的存储内容，确保存入的是真正的换行符，而不是转义后的\\n——有时候可能是存入数据时就不小心转义了，这时候要从存储环节修正。

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