react钩子函数（使用ReactJS发送电子邮件）

ReactJS 是一个很棒的库，用于构建漂亮的 Web 应用程序。它可以处理你能想到的任何类型的响应式界面和复杂的交互。但是，如果您需要向 Web 应用程序添加一些典型的后端功能，事情可能会变得有点棘手。想一想放置在其中一个子页面上的简单联系表格。虽然构建 React 电子邮件模板将是小菜一碟（虽然不是那么好吃！），但添加发送功能需要一些研究。

在本文中，我们将介绍各种方法，并且我们还将在此过程中分享一些建议。

使用“Pure React”发送电子邮件
即使没有任何 3rd-party 插件，你也能从基于 React 的网站发送最简单的电子邮件吗？不幸的是没有。React JS 应用程序运行在客户端（在浏览器中），需要在服务器端设置 SMTP 服务器。理论上，您可以直接在代码中在客户端提供您的 SMTP 凭据。但是，由于将这些敏感数据留给每个人查看和使用是一个相当糟糕的主意，因此我们不会进一步详细说明。

稍后我们将讨论如何设置快速后端并添加第 3 方邮寄功能。不过，让我们先从一个更简单的方法开始吧！

使用 EmailJS 发送电子邮件
现在，让我们看看根本不需要设置后端的方法。

我们将设置一个外部工具来为我们处理电子邮件发送，并且我们只会确保在邮件到期时触发此工具。我们将使用一个非常流行的服务，称为 EmailJS。它允许您在浏览器中连接您的电子邮件客户端，构建模板并使用 EmailJS API 发送。该工具并不完全适用于 ReactJS，也可以与 Vue.js 或 Angular 等其他框架完美配合。您可以使用许多电子邮件服务，从典型的个人电子邮件服务（如 gmail 和 Outlook）到更多的邮件绑定工具（如 Mandrill 或 Mailgun）。每种的定价都不同，大多数都带有免费的、有限的层级。



如您所见，选项非常丰富。

对于此示例，我们将坚持使用 Gmail。

首先，创建一个EmailJS 帐户并连接您所需的电子邮件处理服务。

然后，开始使用内置的电子邮件模板编辑器构建您的第一个模板。它使用起来非常简单，所以我们不打算在这里详细介绍。为了使您的电子邮件更加个性化，请利用动态变量。EmailJS 还带有其他功能，例如自动回复或添加附件的选项。您可以使用Email Template Example,默认情况下由 EmailJS 添加到您的个人资料中的内容作为参考。



现在，是时候将 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.



就这样！进行得很顺利吧？

设置 Express 后端并连接第三方
如果 EmailJS 不适用于您的用例，可以选择快速设置您自己的后端并连接第三方工具以进行电子邮件发送。如本文开头所述，ReactJS 本身不具备发送功能。

设置非常简单。本指南将引导您逐步完成快速构建 Express Node.js 后端所需的步骤。

拥有后端后，就该连接专门用于发送电子邮件的服务了。按照此示例了解如何使用您的 Express 后端实现 Mailjet。当然，借助它们的 API，可以实现许多其他工具，例如 SendGrid、Sendinblue 或 Mandrill。有关更多详细信息，请参阅他们的文档。

正如您所看到的，这种方法设置起来相当快，并且可以处理基本的事情，例如大多数联系表格。由于以这种方式发送的电子邮件通常会进入您的收件箱，因此您不太关心格式和样式。如果您刚刚添加的电子邮件工作流用于用户的收件箱（例如，新闻通讯确认表单），您可能需要稍微美化消息。让我们谈谈如何做到这一点。

在 ReactJS 中构建 HTML 模板
如您所知，ReactJS 项目是使用可重用组件构建的，这些 UI 片段可以彼此组合并放置在网页周围，几乎不费吹灰之力。毫不奇怪，在 React 中构建电子邮件模板的工作方式完全相同。

如果您曾经尝试过使用任何框架构建和发送电子邮件，您就会知道这有多痛苦。在您的测试环境中看起来很棒的东西可能会呈现一组完全随机的样式并复制到用户的设备上。许多浏览器识别<style>标签，但其他浏览器会忽略它们。其他人使用内联样式，但同样 - 不是全部。结果，即使您从内到外测试您的电子邮件，也可能会出现问题。

一种旨在防止此类麻烦的工具是 Mjml。它是一种标记语言，可以轻松生成完全响应的 HTML 模板。它带有大量常用组件，可以插入到您的邮件中，而无需从头开始对其进行编码。

你可以使用的另一个非常有用的工具是 React-HTML-email。它用于快速构建您选择的可重用组件。您插入您的代码示例，不管它有多长，并立即获得一个您可以在整个项目中使用的单行代码组件。请参见下面的示例：

import React from 'react';
import { Email, Item, A} from 'react-html-email';
export default function InlineLink({name, children}) {
return (
<Email title='link'>
<Item>
Hello {name}
<A style={{ paddingLeft: 10 }} href='/blog/'>Click me!</A>
</Item>
<Item>
{children}
</Item>
</Email>
)};


将上面的代码添加到客户端项目中的文件到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


React-HTML-email 带有一个电子邮件验证器，如果组件代码中有任何错误，它会立即检查并通知您。

还有一个非常有趣的用于 React 的 WYSIWYG 电子邮件编辑器，具有拖放功能，恰当地称为 React 电子邮件编辑器。检查一下，看看它是否可以加速您的开发。

最后，无论您是否使用这些工具，在尝试构建响应式电子邮件模板时，都需要考虑很多技巧。这篇文章是一个相当引人注目的来源。

使用 Nodemailer 发送电子邮件
现在，假设我们想使用 Nodemailer 为我们的 React 电子邮件客户端构建一个后端。这是完全可行的，而且设置起来并不难。

Nodemailer 是任何需要使用 Node.js 框架发送电子邮件的人的首选模块。如果您按照上面的示例进行操作，您应该已经设置了 Create-React-App 和 Express 服务器。如果您不这样做，请在我们开始之前进行，因为我们将同时使用两者。

在此示例中，我们将引用您可以添加到您的网站的 Web 表单，例如，让客户快速联系您的销售和支持团队。从在 ReactJS 中构建这种表单的 UI 开始。需要一些灵感吗？查看 45 种可立即实施的 React 表单的列表。

现在，添加处理表单提交的代码。Nodemailer 可以使用大量参数；在此处查看它们并根据您的需要添加它们。这是一个例子：

handleSubmit(event){
const messageHtml = renderEmail(
<MyEmail name={this.state.name}> {this.state.feedback}</MyEmail>
);
axios({
method: "POST",
url:"http://localhost:3000/send",
data: {
name: this.state.name,
email: this.state.email,
messageHtml: messageHtml
}
}).then((response)=>{
if (response.data.msg === 'success'){
alert("Email sent, awesome!");
this.resetForm()
}else if(response.data.msg === 'fail'){
alert("Oops, something went wrong. Try again")
}
})
}


添加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 对几乎所有类型的项目都有多么强大和有用，你不想被困在表单提交这样简单的事情上。无论如何，都尝试一下，看看哪个最适合您的项目。祝你好运！