如何使用 React Email 发送邮件

邮件客户端不支持现代 CSS 的 flexbox 和 grid 布局，开发者只能手写嵌套的 HTML 表格和内联样式。React Email 将 JSX 组件编译为基于表格的标记，在 Gmail、Outlook 和 Apple Mail 中都能一致地显示。

如何构建邮件模板？

安装依赖包：

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:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

onboarding@messagebird.dev 发件人和 delivered@messagebird.dev 沙箱地址可以让你在一次运行中同时验证渲染后的模板和发送。同样的 render() 输出也可以在 Vercel 函数中使用，或配合 Nodemailer 通过 SMTP 发送。

常见问题

React Email 会发送邮件吗？

不会。它只负责构建模板并将其渲染为 HTML 和纯文本。投递是由服务商完成的独立步骤，例如 SMTP 服务器或邮件 API。

为什么使用 React Email 而不是手写 HTML？

邮件 HTML 需要兼容各种客户端，而这些客户端对 CSS 的支持差异很大，通常意味着需要嵌套表格和内联样式。React Email 的组件会为你生成这些标记，你只需编写组件即可获得适用于邮件的输出。

能否用同一个模板发送不同的数据？

可以。模板就是 React 组件，因此它们接受 props。为每位收件人传入不同的值渲染同一组件，然后逐一发送结果即可。

React Email 和发送 API 清晰地分工协作：一个负责构造消息，另一个负责投递。如需在发送侧使用托管模板，请参阅 Bird 邮件模板。