在React.js中使用SMTP.js发送邮件的问题及脚本放置位置咨询

嗨，我来帮你梳理下在React里用SMTP.js发邮件遇到的两个问题～

一、脚本文件的正确放置位置 #

你直接把<script src="https://smtpjs.com/v3/smtp.js"></script>放在JSX文件里肯定会报错，因为React的JSX机制不会像普通HTML那样解析执行外部脚本标签。正确的做法是把它放到项目public文件夹下的index.html里，推荐放在<body>标签的末尾（</body>之前），这样既不会阻塞页面渲染，又能确保脚本在React组件加载前就完成加载，全局的Email对象就能正常使用了。

示例如下：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 把SMTP的脚本放在这里 -->
    <script src="https://smtpjs.com/v3/smtp.js"></script>
  </body>
</html>

二、函数内代码不工作的排查要点 #

把发送邮件的代码放到函数里却没效果，你可以从这几个方向排查：

• 必须由用户交互触发：浏览器的安全策略不允许页面自动执行发送邮件的操作，你得把发送逻辑绑定到用户的点击事件（比如按钮点击）上，不能在组件挂载时直接执行。
• 检查SMTP配置的有效性：确认Username、Password是Elastic Email的有效凭证，有些邮件服务商要求用API密钥而非登录密码，你可以去Elastic Email后台确认一下。
• 添加错误捕获逻辑：原来的代码只处理了成功的情况，加上.catch()能帮你捕获错误信息，方便定位问题：

const sendTestEmail = () => {
  Email.send({
    Host: "smtp.elasticemail.com",
    Username: "你的ElasticEmail用户名",
    Password: "你的ElasticEmail密码/API密钥",
    To: 'them@website.com',
    From: "you@isp.com",
    Subject: "This is the subject",
    Body: "And this is the body"
  })
  .then(message => alert(`邮件发送成功：${message}`))
  .catch(error => console.error("邮件发送失败：", error));
};

组件内使用示例 #

你可以在React组件里这样调用这个函数：

import React from 'react';

function EmailSender() {
  const sendTestEmail = () => {
    // 上面的发送代码
  };

  return (
    <div>
      <button onClick={sendTestEmail}>发送测试邮件</button>
    </div>
  );
}

export default EmailSender;

备注：内容来源于stack exchange，提问作者Fatma Aydoğdu