React Email 6.0

React Email 6.0 是什么？

React Email 6.0 是 React Email 的开源更新版本，提供可视化邮件编辑器，可嵌入到您自己的应用中。它还包含一套新模板和统一的 React Email 组件导入包。

React Email 6 的核心目的是帮助团队基于 React 工作流创作邮件布局并生成邮件就绪输出（包括 HTML），同时保持编辑器的可扩展性和可定制性。

开源可视化编辑器（独立包）：安装编辑器为 @react-email/editor，使用 EmailEditor 将其嵌入您的应用。
嵌入到您的应用中：使用最小组件示例（return <EmailEditor />）直接在 React 中渲染编辑器。
核心 + 扩展的编辑器架构：编辑器分为内置核心和扩展层，因此可以在不更改核心的情况下添加自定义块/功能。
可组合节点 API（EmailNode）用于自定义块：通过指定块如何映射到 HTML 以及如何渲染到 React Email 输出，来定义新编辑器块。
主题支持：加载默认主题 CSS（@react-email/editor/themes/default.css）或构建自定义主题以匹配您的应用样式。
全新模板合集：包含常见用例的模板（认证流程和电商序列），提供为 React Email 模板和 Figma 文件。
统一的 React Email 组件包：从 react-email 单一包导入组件（编辑器仍需单独安装）。

安装或更新包：如果从 React Email 5.0 升级，请按照升级部分的说明操作。
单独安装编辑器（编辑器不包含在统一的 react-email 包中）：
- npm i @react-email/editor
在 React 应用中嵌入编辑器：
- 从 @react-email/editor 导入 EmailEditor 并在组件中渲染。
可选：样式化编辑器：
- 导入默认主题 CSS（@react-email/editor/themes/default.css）或应用您自己的主题。
可选：自定义编辑器：
- 使用可组合 API（EmailNode）定义自定义块，包括 HTML 解析（parseHTML）和输出生成（renderToReactEmail）。
从模板开始：
- 使用提供的模板作为基础，或将单个部分拉入您自己的 React Email 模板。

编辑器包含在统一的 react-email 包中吗？
否。编辑器需单独安装为 @react-email/editor。
我可以直接在 React 应用中嵌入编辑器吗？
是。文档展示了导入 EmailEditor 并在组件中渲染的方法。
如何向编辑器添加自定义块？
使用可组合 API 通过 EmailNode 定义块的 HTML 解析（parseHTML）及其 React Email 渲染输出（renderToReactEmail）。
在哪里可以找到新模板？
模板提供为 React Email 模板和 Figma 文件，包括认证和电商模板。
从 React Email 5.0 升级到 6.0 有何不同？
升级步骤移除 @react-email/components 和 @react-email/preview-server，安装 react-email@latest 和 @react-email/ui@latest，并更新导入以使用 react-email 而非 @react-email/components。

通用邮件 HTML 编辑器/构建器（非 React）：如果只需编辑器 UI 且不想要基于 React 的组件工作流，则有用，但会丢失 React Email 集成模式。
模板优先的 React 邮件库：如果不需要嵌入可视化编辑器，则可依赖 React 组件/模板，而无编辑器扩展性。
导出 HTML 的所见即所得编辑器：这些可生成邮件 HTML 输出，但可能不提供相同的可组合节点方法，用于将编辑器特定自定义块嵌入 React Email 工作流。
设计工具手动转换为邮件标记：Figma 优先团队可在 Figma 中创建布局并手动实现在邮件代码中；这不同于直接使用 React Email 模板，以及通过编辑器工作流生成邮件就绪输出。