React中使用EmailJS发送邮件时多行字段显示为单行的问题求助

问题原因 #

邮件默认以HTML格式渲染，普通换行符（\n）在HTML中会被视为空白字符，不会解析为换行，导致所有内容挤成单行。

解决方案 #

方法1：将换行符替换为HTML换行标签<br> #

修改生成stopsString的代码，把原有的换行替换为<br>标签，确保HTML能识别换行：

let stopsString = "";

stops.map((stop, index) => {
  stopsString += `Stop #${index + 1}<br>
  Name: ${stop.name}<br> 
  Address: ${stop.address}<br> 
  Lat: ${stop.lat} Lng: ${stop.lng}<br><br>`;
});

也可以用更简洁的数组拼接方式：

const stopsString = stops.map((stop, index) => 
  `Stop #${index + 1}<br>
  Name: ${stop.name}<br>
  Address: ${stop.address}<br>
  Lat: ${stop.lat} Lng: ${stop.lng}`
).join('<br><br>');

方法2：在EmailJS模板中用<pre>标签包裹变量 #

如果不想修改前端代码，可在EmailJS的邮件模板里，将{{stops}}变量放入<pre>标签中，该标签会保留文本原有的换行和空格：

<pre>{{stops}}</pre>

方法3：设置邮件为纯文本格式 #

在EmailJS的服务或模板设置中，将邮件格式切换为纯文本（Plain Text），这样普通换行符就能被正确解析。缺点是纯文本邮件样式灵活性较低，适合对格式要求不高的场景。

验证 #

修改后重新发送邮件，内容会按照预期的多行格式显示。

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