如何使用 ReactJS 和 SendGrid 發送電子郵件？

Question

我在 SendGrid 上有設置和帳戶。 我已經獲得了 API 密鑰和 Node.js 方法。 我正在使用 React js 創建一個 Web 應用程序。 我想通過 SendGrid 發送電子郵件。 我找不到任何解決方案。 請舉例說明我的問題。

Answer 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);

Answer 2

react 不可能，因為它是一個前端庫，如果你嘗試用 react 實現，你會得到這些錯誤

---> 拒絕設置不安全的標頭“User-Agent”

如果您需要設置這些標頭，那么您需要從您的服務器而不是訪問者的瀏覽器發出請求。

所以這是不可能的，你需要為它使用一些后端或火力。

Answer 3

您可以使用MailJS ，並將 sendgrid 用於事務服務。 它很容易使用。

Answer 4

有多種解決方案可用。

1. 您可以使用 nodeMailer ： https ://nodemailer.com/about/
2. 節點郵件程序甚至專門為 Sendgrid 編寫了傳輸： https ://www.npmjs.com/package/nodemailer-sendgrid-transport
3. 您可以通過 sendgrid 本身使用節點包： https : //github.com/sendgrid/sendgrid-nodejs/tree/main/packages/mail