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

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

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>Lets 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 中构建电子邮件模板的工作方式完全相同。

如果您曾经尝试过使用任何框架构建和发送电子邮件，您就会知道这有多痛