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 模板或透過編輯器工作流程產生電郵就緒輸出不同。