react-email 是做什么的？
在构建使用 React 组件的 HTML 邮件模板、为应用添加 React Email 可视化编辑器、将邮件渲染为 HTML 或通过 Resend 发送邮件时使用。涵盖欢迎邮件、密码重置、通知、订单确认、新闻通讯、事务性邮件以及可嵌入的邮件编辑器组件。
使用场景
本技能适用于所有需要自动化发送 HTML 邮件的项目，特别是基于 React 的现代 Web 应用。它支持以下使用场景：
- 使用 React 组件（如
@react-email/components）构建邮件模板 - 启动 React Email 可视化编辑器（
npx react-email）进行拖拽式设计 - 将邮件组件渲染为适合邮件客户端的 HTML 字符串
- 通过 Resend SDK (
resend) 发送邮件 - 集成可嵌入的邮件编辑器组件到用户界面中
前提条件
- Node.js 18.0.0 或更高版本
- Resend API 密钥（通过
RESEND_API_KEY环境变量设置） - 可选：React Email 项目已初始化
快速开始
- 安装依赖
npm install @react-email/components resend
- 创建邮件组件
// emails/WelcomeEmail.jsx
import { Html, Head, Preview, Body, Container, Section, Text, Link } from '@react-email/components';
export default function WelcomeEmail({ username = 'User', confirmUrl = 'https://example.com' }) {
return (
<Html>
<Head />
<Preview>欢迎加入我们的社区！</Preview>
<Body style={{ fontFamily: 'Arial, sans-serif' }}>
<Container>
<Section>
<Text>你好 {username}，</Text>
<Text>感谢你的注册。请点击下方链接确认你的邮箱地址：</Text>
<Link href={confirmUrl}>确认邮箱</Link>
</Section>
</Container>
</Body>
</Html>
);
}
- 预览邮件
npx react-email
export default { dir: './emails' }
- 发送邮件
import { Resend } from 'resend';
import WelcomeEmail from './emails/WelcomeEmail.jsx';
const resend = new Resend(process.env.RESEND_API_KEY);
const { data, error } = await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: '欢迎加入 Acme！',
react: WelcomeEmail({ username: 'alice', confirmUrl: 'https://acme.com/confirm?token=abc123' }),
});
可嵌入的邮件编辑器
要将 React Email 可视化编辑器嵌入到你的应用中：
npm install @react-email/editor
import { EmailEditor } from '@react-email/editor';
function App() {
return (
<EmailEditor
onSave={(html) => console.log('保存的 HTML:', html)}
initialHtml="<html><body><table>...</table></body></html>"
/>
);
}
注意事项
- 邮件 HTML 应保持简洁，避免使用 JavaScript 或外部 CSS
- Resend 默认使用沙箱域名
[email protected]，生产环境需配置自定义域名 - 使用
[email protected]或更高版本以获得最佳编辑器体验