搜索
  • 如何使用React Email发送精美的邮件
  • 发布于 1个月前
  • 95 热度
    0 评论
传统邮件开发依赖繁琐的 HTML 表格和内联 CSS以及跨客户端兼容性问题，不仅效率低下，还难以维护，让一众开发者望而生畏。React Email 作为下一代无样式组件集合，正在改变这一现状。它以 React 的组件化理念为基础，结合现代开发工具和 TypeScript 支持，让开发者能够以直观、可维护的方式创建精美的电子邮件模板。

React Conf 2025 上 @resend（React Email 维护团队）分享了其在构建动态邮件模板时的效率提升。同时，大会发布的 React 19.2 相关特性也进一步增强了 React Email 的潜力，例如 Owner Stacks 优化了组件渲染性能，适合动态邮件场景，React Compiler 为邮件模板的编译提供了更高效的路径。本文将深入解析 React Email 的核心特性、实战应用。欢迎评论、点赞与转发。

什么是 React Email？
React Email 是一个开源的 React 组件库，专为电子邮件开发设计。它提供了一组无样式的核心组件（如 <Section>、<Button>、<Img>），开发者可通过 JSX 组合这些组件，并用 Tailwind、CSS 或内联样式自定义外观。React Email 的编译器会将 JSX 转换为邮件客户端兼容的 HTML，解决传统邮件开发的兼容性难题。核心特性主要包括：
无样式组件：不绑定特定样式，灵活支持 Tailwind、CSS 模块或内联 CSS。
TypeScript 支持：内置类型定义，确保 props 和组件接口的类型安全。
自动内联化：通过 @react-email/render 将样式转换为内联 CSS，适配 Gmail、Outlook 等客户端。

React 19 集成：兼容 Owner Stacks 和 useEffectEvent，提升动态渲染性能。


React Email 组件列表
React Email 的组件库聚焦于邮件语义化元素，所有组件均为无样式设计，便于与 Tailwind 或内联样式结合。它们自动处理兼容性（如使用 <table> 布局），并支持暗黑模式。以下是完整组件列表。
组件名称 描述 关键 Props 示例代码
Html 邮件的根元素，包装整个模板，支持 lang 属性。 lang (string, 默认 'en') tsx<br>import { Html } from '@react-email/components';<br><Html lang="zh-CN">内容</Html><br>
注释：设置语言以优化国际化。
Head 邮件头部，包含 meta 标签和标题。 children (ReactNode) tsx<br><Head><br>  <title>欢迎邮件</title><br></Head><br>
注释：用于 SEO 和客户端渲染提示。
Body 邮件主体容器，确保居中和响应式。 style (CSSProperties) tsx<br><Body style={{ backgroundColor: '#ffffff' }}><br>  主体内容<br></Body><br>
注释：默认宽度 600px，适配移动端。
Preview 邮件预览文本，显示在收件箱中。 children (string) tsx<br><Preview>新功能更新！</Preview><br>
注释：限制 100 字符，提升打开率。
Container 内容容器，提供最大宽度和内边距。 style (CSSProperties) tsx<br><Container style={{ width: '600px' }}><br>  容器内容<br></Container><br>
注释：默认 padding: 20px。
Section 部分容器，使用表格实现块级布局。 style (CSSProperties) tsx<br><Section style={{ padding: '20px' }}><br>  部分内容<br></Section><br>
注释：支持垂直堆叠，兼容旧客户端。
Row 行容器，用于水平排列元素。 style (CSSProperties) tsx<br><Row style={{ display: 'table-row' }}><br>  行内容<br></Row><br>
注释：结合 Column 使用，实现网格。
Column 列容器，支持响应式列宽。 style (CSSProperties), width (string) tsx<br><Column width="50%"><br>  列内容<br></Column><br>
注释：百分比宽度确保兼容。
Text 文本元素，支持段落和样式。 style (CSSProperties) tsx<br><Text style={{ fontSize: '16px' }}>Hello World</Text><br>
注释：默认 sans-serif 字体。
Heading 标题元素，h1-h6 变体。 as ('h1'|'h2' 等), style tsx<br><Heading as="h1">大标题</Heading><br>
注释：语义化，提升可访问性。
Link 超链接，支持 href 和样式。 href (string), style tsx<br><Link href="https://example.com">链接</Link><br>
注释：自动内联，避免外部 CSS。
Button 按钮组件，带 hover 效果。 href (string), style tsx<br><Button href="/"><br>  点击我<br></Button><br>
注释：默认蓝色背景，圆角。
Img 图片元素，支持 alt 和尺寸。 src (string), alt (string), width tsx<br><Img src="logo.png" alt="Logo" width={200} /><br>
注释：确保 alt 以防图片禁用。
Hr 水平分隔线。 style (CSSProperties) tsx<br><Hr style={{ borderTop: '1px solid #ccc' }} /><br>
注释：简单分隔，兼容所有客户端。
Tailwind Tailwind CSS 包装器，启用实用类。 children (ReactNode) tsx<br><Tailwind><br>  <div className="p-4 bg-blue-500">内容</div><br></Tailwind><br>
注释：需安装 @react-email/tailwind。

React Email 应用示例
使用 React Email 前，需安装相关依赖。以下是基本配置：
# 创建项目
npx create-react-email@latest my-email-app
cd my-email-app
npm install @react-email/components @react-email/render react@19 react-dom@19
若使用 Tailwind CSS，额外配置：
npm install tailwindcss @react-email/tailwind --save
npx tailwindcss init
tailwind.config.js 需适配邮件开发：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [require('@react-email/tailwind')],
  corePlugins: { preflight: false }, // 禁用不兼容的 Tailwind 功能
};
下面使用 React Email 的 <Section> 和 <Button>实现一个简单的邮件组件示例：
// WelcomeEmail.tsx
import { Section, Button, Text, Html } from '@react-email/components';
import * as React from 'react';

interface WelcomeEmailProps {
  userName: string;
}

const WelcomeEmail: React.FC<WelcomeEmailProps> = ({ userName }) => {
  return (
    <Html>
      <Section style={{ backgroundColor: '#f4f4f5', padding: '20px' }}>
        <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
          Welcome, {userName}!
        </Text>
        <Text style={{ color: '#4b5563' }}>
          Thanks for joining our community. Get started now!
        </Text>
        <Button
          href="https://example.com"
          style={{ backgroundColor: '#2563eb', color: '#ffffff', padding: '12px 24px', borderRadius: '4px' }}
        >
          Start Exploring
        </Button>
      </Section>
    </Html>
  );
};

export default WelcomeEmail;
<Section> 和 <Button> 是 React Email 的无样式组件，自动编译为表格布局。示例中使用内联样式确保邮件客户端兼容性。同时引入 TypeScript 来保证类型安全。我们可以使用 @react-email/render 将组件转为 HTML：
// 堆代码 duidaima.com
// renderEmail.tsx
import { render } from '@react-email/render';
import WelcomeEmail from './emails/WelcomeEmail';

const html = render(<WelcomeEmail userName="Alice" />, { pretty: true });
console.log(html);
最后，React Email 作为下一代无样式组件集合，彻底革新了电子邮件开发。它的 React 组件化、无样式灵活性和 TypeScript 支持，让中级开发者能够快速构建精美、兼容性强的邮件模板。
用户评论
可能感兴趣的话题