如何使用 ReactJS 和 SendGrid 发送电子邮件？答案

【问题标题】：How to send email with ReactJS and SendGrid?如何使用 ReactJS 和 SendGrid 发送电子邮件？
【发布时间】：2019-05-13 09:52:49
【问题描述】：

我在 SendGrid 上有设置和帐户。我有 API 密钥和 Node.js 方法。我正在使用 React js 创建一个 Web 应用程序。我想通过 SendGrid 发送电子邮件。我找不到任何解决方案。请通过示例帮助我解决我的问题。

【问题讨论】：

我假设你的意思是 SendGrid？
React 只是一个视图库（前端）您需要设置一个后端（服务器）这是带有 Node.js 示例的库：github.com/sendgrid/sendgrid-nodejs

标签： node.js reactjs sendgrid sendgrid-api-v3

【解决方案1】：

//Form.js
class Form extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}
//index.js

    const sgMail = require('@sendgrid/mail');
    sgMail.setApiKey(process.env.SENDGRID_API_KEY);
    const msg = {
      to: test@example.com',
      from: 'test@example.com',
      subject: 'Sending with SendGrid is Fun',
      text: 'and easy to do anywhere, even with Node.js',
      html: '<strong>and easy to do anywhere, even with Node.js</strong>',
    };

sgMail.send(msg);

【讨论】：

你的回答很好，我建议添加更多信息，例如在电子邮件中发送表单数据

【解决方案2】：

因为它是一个前端库，所以不能用 react 实现，如果你尝试用 react 实现你会得到这些错误

---> 拒绝设置不安全的标头“User-Agent”

如果您需要设置这些标头，那么您需要从您的服务器而不是访问者的浏览器发出请求。

所以这在 react 中是不可能的，你需要使用一些后端或 firebase。

【讨论】：

有很多库声称支持从客户端发送邮件。基本上，如果您设置 no-cors，您将能够毫无问题地发送邮件。当您为其他 REST 请求设置 no-cors 时，您不会遇到问题。

【解决方案3】：

您可以使用MailJS，并将sendgrid 用于事务服务。它易于使用。

【讨论】：

很棒的推荐！！ @Anroche

【解决方案4】：

有多种解决方案可用。

你可以使用 nodeMailer : https://nodemailer.com/about/
节点邮件甚至有专门为 Sendgrid 写的传输：https://www.npmjs.com/package/nodemailer-sendgrid-transport
您可以通过 sendgrid 本身使用节点包：https://github.com/sendgrid/sendgrid-nodejs/tree/main/packages/mail

【讨论】：