如何在 reactjs 中通过 "smtpjs" 发送电子邮件

Question

每当用户点击提交时，我都想通过表单发送电子邮件

我使用smtpjs软件包，你可以在这里查看网站https://smtpjs.com/

在纯js中，我们必须在html头标签中添加这行代码

<script src=
"https://smtpjs.com/v3/smtp.js">
</script>

然后我们可以使用Email.send({})发送电子邮件

但对于反应

我试图在index.html
的head中添加提到的代码(脚本标记(，并试图将其用作Email.send({})和window.Email.send({})
，但它无法识别Email
所以我的问题是，既然我在index.html 中添加了库，如何在react中使用它

编辑：

我在发送电子邮件时出错

The SMTP server requires a secure connection or the client was not 
authenticated. The server response was: 5.7.0 Authentication Required. Learn 
more at - Fix: Try a different SMTP server : 
https://elasticemail.com/account#/create-account?r=20b444a2-b3af-4eb8-bae7- 
911f6097521c

我为谷歌启用了不太安全的应用程序，也关闭了两步验证，但这对没有帮助

Answer 1

您的<script>标记正在向全局window对象添加属性Email，但TypeScript对此一无所知。你需要告诉TypeScript这个属性存在以及它是什么类型。

由于这个包非常简单，我继续创建了一个类型声明文件。我遵循了关于全局库的TypeScript文档中的指导原则和示例。

// Type definitions for SmtpJs
// Project: https://smtpjs.com/
// Definitions by: Linda Paiste https://github.com/lindapaiste
// SmtpJS exposes a variable `Email` on the global `window` object
declare namespace Email {
type Attachment =
| {
name: string;
path: string;
}
| {
name: string;
data: string; // base64 format
};
interface EmailData {
SecureToken: string;
To: string | string[];
From: string;
Subject: string;
Body: string;
Attachments?: Attachment[];
}
function send(email: EmailData): Promise<string>;
}

我将把它发布到@types/smtpjs.com，但现在我把它包含在项目的src目录中。

现在我们需要获取TypeScript来读取该文件并包含其类型。正如Matt McCutchen在回答中所解释的那样，该文件应该命名为index.d.ts，并且应该位于具有包名称的目录中。该目录应该位于包类型的目录中。

我认为，如果你能把你的文件放在./src/@types/smtpjs/index.d.ts，你可以跳过这里的几个步骤。CodeSandbox不允许在名称中使用特殊字符，所以我不得不使用不带@的位置./src/types/smtpjs/index.d.ts，并使用tsconfig.json中的typeRoots编译器选项告诉TypeScript有关该类型目录的信息。

"compilerOptions": {
...
"typeRoots": [
"./node_modules/@types/",
"./src/types"
]
}

设置好所有内容后，在访问window.Email或window.Email.send()时，您将获得完全的TypeScript支持。如果要访问特定类型以将其用于变量，可以使用Email.EmailData和Email.Attachement。

CodeSandbox演示