使用 ReactJS 发送电子邮件

每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

现在，是时候将 EmailJS 添加到您的 React 项目中了。如果您使用的是 Webpack 之类的打包工具，请npm,按照此处的详细说明进行安装。

或者，如果您的应用程序是使用 Create-React-App 构建的，您可以将 EmailJS 直接添加到public/index.html文件的头部。对于以下示例，我们将进行解释，假设您正在使用使用 Create-React-App 构建的应用程序。

<script type=”text/javascript”
src=”
https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js”></script>
<script type=”text/javascript”>
(function(){
emailjs.init(“<YOUR USER ID>”); // Obtain your user ID at the dashboard
https://dashboard.emailjs.com/integration
})();
</script>

设置完成后，让我们发送实际的电子邮件。EmailJS 提供了两种方法：

Emailjs.send 用于基本的电子邮件传递。
Emailjs.sendForm 专用于 Web 表单，因为它从其字段中收集数据并将它们传递给您选择的模板。这是一个 React 电子邮件表单组件的示例代码。将其放入src/Form.js项目中的文件中。
import React from ‘react’;
export default class extends React.Component {
constructor(props) {
super(props);
this.state = { feedback: ”, name: ‘Name’, email: ’email@example.com’ };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<form className=”test-mailing”>
<h1>Let’s see if it works</h1>
<div>
<textarea
id=”test-mailing”
name=”test-mailing”
onChange={this.handleChange}
placeholder=”Post some lorem ipsum here”
required
value={this.state.feedback}
style={{width: ‘100%’, height: ‘150px’}}
/>
</div>
<input type=”button” value=”Submit” className=”btn btn–submit” onClick={this.handleSubmit} />
</form>
)
}
handleChange(event) {
this.setState({feedback: event.target.value})
}
handleSubmit() {
}
}

现在我们需要向handleSubmit()我们的组件添加一个函数来调用sendFeedback()该函数。结果，通过 EmailJS 触发电子邮件发送。为了简单起见，我们将使用默认emailjs.send函数。

handleSubmit (event) {
const templateId = ‘template_id’;
this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
}
sendFeedback (templateId, variables) {
window.emailjs.send(
‘gmail’, templateId,
variables
).then(res => {
console.log(‘Email successfully sent!’)
})
// Handle errors here however you like, or use a React error boundary
.catch(err => console.error(‘Oh well, you failed. Here some thoughts on the error that occured:’, err))
}

用您自己的函数参数替换函数参数，并在 EmailJS 仪表板中测试一切是否顺利。

不要忘记Form从应用程序的主要组件导入和使用您的组件，该组件位于src/App.js.

将上面的代码添加到客户端项目中的文件到src目录并调用它Email.js。不要忘记将react-html-email组件添加到您的项目中。然后将此组件导入到client/src/Form.js和renderEmail从react-html-email到client/src/Form.js。

import MyEmail from ‘./Email’
import { renderEmail } from ‘react-html-email’

之后，您可以使用以下行生成消息的 HTML 代码：

const messageHtml = renderEmail(<MyEmail name={this.state.name} />); // HTML code

添加axios到您的客户端应用程序。
express_react_example/client运行中：

npm install axios –save

并将导入添加到
express_react_example/client/Form.js:

import axios from ‘axios’;

确保在提交消息后重置表单，以防用户想要发送另一条消息。

resetForm(){
this.setState({feedback: ”});
}

现在，是时候将Nodemailer添加到我们的项目（后端部分）了：

npm install nodemailer –save

创建一个配置文件来存储我们将要使用的帐户的凭据。我们将其添加到后端，因此这次没有安全问题。将此文件放在您的服务器源代码旁边并调用它config.js。

module.exports = {
USER: ‘YOUR_EMAIL_ADDRESS’,
PASS: ‘PASSWORD_FOR_EMAIL’
}

然后，我们要设置传输器来传递我们的消息。Nodemailer 可以与不同类型的传输器一起使用。由于安装简单且可靠，我们推荐使用默认的 SMTP 传输器。如果您对它不满意，您还可以将其他传输器与您的 Nodemailer 活动集成。我们将在这里坚持使用默认设置。

首先，我们需要与 SMTP 传输器共享我们的凭据。server.js将以下代码添加到您的服务器源代码中，如果您遵循 Express.js 设置说明，则应调用该代码：

const nodemailer = require(‘nodemailer’);
const creds = require(‘./config’);
var transport = {
host: ‘your_host_here’, // e.g. smtp.gmail.com
auth: {
user: creds.USER,
pass: creds.PASS
}
}
var transporter =
nodemailer.createTransport(transport)
transporter.verify((error, success) => {
if (error) {
console.log(error);
} else {
console.log(‘All works fine, congratz!’);
}
});

完成后，我们设置了邮寄路线，将我们的电子邮件发送到他们的最终目的地——我们的收件箱！

app.use(express.json()); app.post(‘/send’, (req, res, next) => {
const name = req.body.name
const email = req.body.email
const message = req.body.messageHtml
var mail = {
from: name,
to: ‘
RECEIVING_EMAIL_ADDRESS_GOES_HERE’,
subject: ‘Contact form request’,
html: message
}
transporter.sendMail(mail, (err, data) => {
if (err) {
res.json({
msg: ‘fail’
})
} else {
res.json({
msg: ‘success’
})
}
})
})

现在通过在应用程序的根目录中运行以下命令来运行后端：

node server.js

并通过在客户端目录运行命令来运行前端部分：

npm start

全部完成！您应该会收到一封电子邮件，表单将重置，并且用户应该会看到您在 React 项目中添加的确认信息。

概括
我们试图总结各种可用于在 ReactJS 中发送电子邮件的方法。鉴于 React 对几乎所有类型的项目都有多么强大和有用，你不想被困在表单提交这样简单的事情上。无论如何，都尝试一下，看看哪个最适合您的项目。祝你好运！