React 电子邮件模板：构建精美的交易电子邮件

交易电子邮件的打开率高达 45%，几乎是营销电子邮件平均水平的 5 倍，但大多数公司都会发送格式不良的 HTML 电子邮件，从而损害品牌认知度。 React Email 将基于组件的开发模型引入电子邮件设计中，让开发人员可以使用熟悉的 React 模式构建美观的响应式模板。

要点

React Email 组件编译为跨客户端兼容的 HTML - Gmail、Outlook、Apple Mail

基于组件的架构支持可重用的页眉、页脚和布局模式

具有热重载功能的本地预览服务器加速模板开发

导出渲染函数（不是原始组件）以实现无缝 NestJS 集成

为什么要反应电子邮件

电子邮件 HTML 是出了名的困难。不同的客户端呈现 HTML 的方式不同 - Outlook 使用 Word 作为其呈现引擎，Gmail 去除样式标签，移动客户端的视口处理也有所不同。

React Email 使用预构建的组件对此进行抽象：容器（响应宽度）、部分（基于表格的块）、行/列（网格系统）、文本、标题、按钮（在 Outlook 中工作）、图像、链接、小时和预览（隐藏收件箱文本）。

项目设置

安装@react-email/components和react-email。使用 templates/、components/ 和导出渲染函数的 render.ts 文件在 packages/email-templates 目录中组织模板。

构建模板

共享布局组件

使用您的品牌创建可重复使用的 EmailHeader 和 EmailFooter 组件。这些确保所有交易电子邮件的一致性。

模板结构

每个电子邮件模板都是一个接收类型化 props 的 React 组件：

import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
          <Text>Hi {userName},</Text>
          <Text>Your account is ready.</Text>
          <Button
            href={loginUrl}
            style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
          >
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

NestJS 集成的渲染

关键模式：导出渲染函数，而不是原始组件。 NestJS 在没有 JSX 编译的情况下运行，因此导入 React 组件直接会导致错误。

创建一个导入模板并导出异步函数的 render.ts 文件：

import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";

export async function renderWelcomeEmail(props: {
  userName: string;
  loginUrl: string;
}) {
  return render(WelcomeEmail(props));
}

在 NestJS 中，调用渲染函数来获取 HTML，然后通过电子邮件传输器发送。

Development Workflow

本地预览

运行 npx react-email dev 进行基于浏览器的热重载预览。变化立即出现，迭代速度加快。

跨客户端测试

使用 Litmus 或 Email on Acid 进行跨客户端测试。最低测试：Gmail (Chrome)、Outlook (Windows)、Apple Mail、Gmail (iOS)、Apple Mail (iOS)、Yahoo Mail 和 Outlook.com。

样式最佳实践

仅内联样式：自动响应电子邮件内联样式以实现客户端兼容性
系统字体：使用 Arial、Georgia、Verdana。自定义字体的支持有限。
600px 最大宽度：桌面和移动设备的标准电子邮件宽度
基于表格的布局：React Email 组件呈现为表格以兼容 Outlook
深色模式：包含 Apple Mail 和 Outlook 深色模式支持的元标记

常用电子邮件模板

订单确认

包括订单号、包含价格的商品清单、送货地址、预计交货时间以及跟踪链接（如果有）。对项目列表使用表格布局。

密码重置

保持简约：简要说明、带有限时链接的突出重置按钮、有关不共享链接的安全通知以及支持联系信息。

发票电子邮件

附上 PDF 发票并在电子邮件正文中包含摘要：发票编号、日期、到期日、总金额以及用于在线查看/付款的按钮。

发货通知

包括订单号、承运商名称、带有可点击链接的跟踪号码、预计交货日期以及正在运送的物品。

常见问题

问：为什么不使用拖放式电子邮件生成器？

拖放构建器适用于营销电子邮件，但缺乏交易电子邮件的动态内容功能。订单确认和发票需要数据驱动的模板，代码可以更好地处理。

问：React Email 是否可以与任何发送服务配合使用？

是的。它输出与 Nodemailer、SendGrid、Postmark、AWS SES、Resend 或任何 SMTP 服务器兼容的标准 HTML 字符串。

问：我们如何处理电子邮件本地化？

将语言环境和翻译后的字符串作为模板道具传递。渲染函数接收所有文本作为参数，因此翻译由 i18n 系统在渲染之前处理。

问：我们可以包含动态图像或图表吗？

使用托管在 URL 上的服务器端生成的图像。 QuickChart 等库将图表呈现为图像。避免嵌入图像——使用托管 URL 来实现兼容性。

下一步是什么

React Email 将事务性电子邮件开发从令人沮丧的表格布局练习转变为基于组件的现代工作流程。

联系 ECOSIRE 进行电子邮件模板开发，或探索我们的 Odoo 实施服务进行集成电子邮件工作流程。

由 ECOSIRE 发布——帮助企业利用企业软件解决方案进行扩展。

React 电子邮件模板：构建精美的交易电子邮件

要点

React Email 组件编译为跨客户端兼容的 HTML - Gmail、Outlook、Apple Mail

基于组件的架构支持可重用的页眉、页脚和布局模式

具有热重载功能的本地预览服务器加速模板开发

导出渲染函数（不是原始组件）以实现无缝 NestJS 集成

为什么要反应电子邮件

项目设置

安装@react-email/components和react-email。使用 templates/、components/ 和导出渲染函数的 render.ts 文件在 packages/email-templates 目录中组织模板。

构建模板

共享布局组件

使用您的品牌创建可重复使用的 EmailHeader 和 EmailFooter 组件。这些确保所有交易电子邮件的一致性。

模板结构

每个电子邮件模板都是一个接收类型化 props 的 React 组件：

import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
          <Text>Hi {userName},</Text>
          <Text>Your account is ready.</Text>
          <Button
            href={loginUrl}
            style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
          >
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

NestJS 集成的渲染

关键模式：导出渲染函数，而不是原始组件。 NestJS 在没有 JSX 编译的情况下运行，因此导入 React 组件直接会导致错误。

创建一个导入模板并导出异步函数的 render.ts 文件：

import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";

export async function renderWelcomeEmail(props: {
  userName: string;
  loginUrl: string;
}) {
  return render(WelcomeEmail(props));
}

在 NestJS 中，调用渲染函数来获取 HTML，然后通过电子邮件传输器发送。

Development Workflow

本地预览

运行 npx react-email dev 进行基于浏览器的热重载预览。变化立即出现，迭代速度加快。

跨客户端测试

使用 Litmus 或 Email on Acid 进行跨客户端测试。最低测试：Gmail (Chrome)、Outlook (Windows)、Apple Mail、Gmail (iOS)、Apple Mail (iOS)、Yahoo Mail 和 Outlook.com。

样式最佳实践

仅内联样式：自动响应电子邮件内联样式以实现客户端兼容性
系统字体：使用 Arial、Georgia、Verdana。自定义字体的支持有限。
600px 最大宽度：桌面和移动设备的标准电子邮件宽度
基于表格的布局：React Email 组件呈现为表格以兼容 Outlook
深色模式：包含 Apple Mail 和 Outlook 深色模式支持的元标记

常用电子邮件模板

订单确认

包括订单号、包含价格的商品清单、送货地址、预计交货时间以及跟踪链接（如果有）。对项目列表使用表格布局。

密码重置

保持简约：简要说明、带有限时链接的突出重置按钮、有关不共享链接的安全通知以及支持联系信息。

发票电子邮件

附上 PDF 发票并在电子邮件正文中包含摘要：发票编号、日期、到期日、总金额以及用于在线查看/付款的按钮。

发货通知

包括订单号、承运商名称、带有可点击链接的跟踪号码、预计交货日期以及正在运送的物品。

常见问题

问：为什么不使用拖放式电子邮件生成器？

拖放构建器适用于营销电子邮件，但缺乏交易电子邮件的动态内容功能。订单确认和发票需要数据驱动的模板，代码可以更好地处理。

问：React Email 是否可以与任何发送服务配合使用？

是的。它输出与 Nodemailer、SendGrid、Postmark、AWS SES、Resend 或任何 SMTP 服务器兼容的标准 HTML 字符串。

问：我们如何处理电子邮件本地化？

将语言环境和翻译后的字符串作为模板道具传递。渲染函数接收所有文本作为参数，因此翻译由 i18n 系统在渲染之前处理。

问：我们可以包含动态图像或图表吗？

使用托管在 URL 上的服务器端生成的图像。 QuickChart 等库将图表呈现为图像。避免嵌入图像——使用托管 URL 来实现兼容性。

下一步是什么

React Email 将事务性电子邮件开发从令人沮丧的表格布局练习转变为基于组件的现代工作流程。

联系 ECOSIRE 进行电子邮件模板开发，或探索我们的 Odoo 实施服务进行集成电子邮件工作流程。

由 ECOSIRE 发布——帮助企业利用企业软件解决方案进行扩展。

React 电子邮件模板：构建精美的交易电子邮件

React 电子邮件模板：构建精美的交易电子邮件

为什么要反应电子邮件

项目设置

构建模板

共享布局组件

模板结构

NestJS 集成的渲染

Development Workflow

本地预览

跨客户端测试

样式最佳实践

常用电子邮件模板

订单确认

密码重置

发票电子邮件

发货通知

常见问题

下一步是什么

与 ECOSIRE 一起发展您的业务

相关文章

NestJS 11 企业 API 模式

Next.js 16 应用程序路由器：生产模式和陷阱

React Query (TanStack)：数据获取模式

React 电子邮件模板：构建精美的交易电子邮件

React 电子邮件模板：构建精美的交易电子邮件

为什么要反应电子邮件

项目设置

构建模板

共享布局组件

模板结构

NestJS 集成的渲染

Development Workflow

本地预览

跨客户端测试

样式最佳实践

常用电子邮件模板

订单确认

密码重置

发票电子邮件

发货通知

常见问题

下一步是什么

与 ECOSIRE 一起发展您的业务

相关文章

NestJS 11 企业 API 模式

Next.js 16 应用程序路由器：生产模式和陷阱

React Query (TanStack)：数据获取模式