React Email 是一个模板库，不是发送工具。你使用 @react-email/components 将邮件编写为 React 组件，调用 render() 将其转换为 HTML 字符串，然后将该 HTML 交给任意邮件服务商进行投递。这种分工很重要：React Email 负责生成标记（以及处理让邮件 HTML 令人头疼的跨客户端兼容问题），而独立的服务商负责发送。以下是完整流程。
如何构建邮件模板？
安装依赖包：
npm install @react-email/components @react-email/render这些组件映射到适用于邮件的 HTML，并自动处理内联样式和表格布局。下面是一个简单的收据模板，接受 props 以便复用：
// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";
type ReceiptProps = {
name: string;
total: string;
};
export function Receipt({ name, total }: ReceiptProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif" }}>
<Container>
<Heading>Thanks, {name}</Heading>
<Text>Your order total was {total}.</Text>
</Container>
</Body>
</Html>
);
}因为本质上就是 React，你可以像在任何组件中一样进行组合、循环和传递 props，然后在发送之前先在本地预览。
如何将组件渲染为 HTML？
render() 接收元素并返回 HTML 字符串。它还可以生成纯文本版本，你应将其作为文本备选内容一并提供：
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
plainText: true,
});此时你已经拿到了一段 HTML 字符串。React Email 的工作到此结束。邮件尚未发送；你需要一个服务商来完成发送。
使用 Bird 发送
将渲染后的 HTML 直接传入 Bird 邮件 API。组件的输出即为 html 字段的值：
import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
const html = await render(<Receipt name="Alex" total="$42.00" />);
const { data, error } = await bird.email.send({
from: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();delivered@bird.dev 沙箱地址始终接受邮件，因此你可以在一次运行中同时验证模板和发送。这种模式可以直接用于无服务器函数，详见如何在 Vercel 上发送邮件。如果你更想通过 SMTP 发送，同样的 html 字符串可配合 Nodemailer 使用。
常见问题
React Email 会发送邮件吗？
不会。它只负责构建模板并将其渲染为 HTML 和纯文本。投递是由服务商完成的独立步骤，例如 SMTP 服务器或邮件 API。
为什么使用 React Email 而不是手写 HTML？
邮件 HTML 需要兼容各种客户端，而这些客户端对 CSS 的支持差异很大，通常意味着需要嵌套表格和内联样式。React Email 的组件会为你生成这些标记，你只需编写组件即可获得适用于邮件的输出。
能否用同一个模板发送不同的数据？
可以。模板就是 React 组件，因此它们接受 props。为每位收件人传入不同的值渲染同一组件，然后逐一发送结果即可。
React Email 和发送 API 清晰地分工协作：一个负责构造消息，另一个负责投递。如需在发送侧使用托管模板，请参阅 Bird 邮件模板。