如何把 MJML 邮件项目迁移到 React Email 并将模板转换为 React 组件【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email如果你的邮件项目目前基于 MJML.mjml模板 mjmlnpm 包想改用 React Email 来构建和发送邮件本文按 Migrating to React Email 给出的官方迁移步骤说明如何把依赖从mjml换成react-email并把每个 MJML 模板转换为 React 组件最后给出两种文档支持的验证方式本地开发服务器实时预览、以及把组件渲染成 HTML 字符串。1. 移除 mjml 依赖安装 react-email官方迁移文档给出的第一步是移除mjmlnpm 包安装react-email。react-email的安装命令在项目现有文档中都有记录见 Rendernpm install react-email -Eyarn add react-email -Epnpm add react-email -E移除mjml的操作在迁移文档中只有一句话Remove themjmlnpm package没有给出具体命令按你项目使用的包管理器在package.json中删除该依赖即可例如 npm 项目执行npm uninstall mjml。2. 把 .mjml 模板转换为 React 组件迁移文档对模板转换的要求是找到所有以.mjml结尾的 MJML 模板把它们转换为.tsx或.jsx的 React 组件在可能的情况下用 React Email 组件标签替换 MJML 标准组件标签文档明确列出的对应组件包括Text、Img、Button等以.js扩展名实现的自定义 MJML 组件同样要转换到.tsx或.jsx的 React 组件中。文档给出的组件用法示例// Text —— 见 apps/docs/components/text.mdx import { Text } from react-email; const Email () { return TextLorem ipsum/Text; };// Img —— 见 apps/docs/components/image.mdx import { Img } from react-email; const Email () { return Img srccat.jpg altCat width300 height300 /; };// Button —— 见 apps/docs/components/button.mdx import { Button } from react-email; const Email () { return ( Button hrefhttps://example.com style{{ color: #61dafb, padding: 10px 20px }} Click me /Button ); };把原来的一个.mjml模板改写成对应组件后大致是这种结构标签与写法取自 Render 文档中的示例import * as React from react; import { Html, Button, Hr, Text } from react-email; export function MyTemplate(props) { return ( Html langen TextSome title/Text Hr / Button hrefhttps://example.comClick me/Button /Html ); } export default MyTemplate;转换时的两点限制来自组件文档Button本质上是一个样式化过的a标签href为必填属性Img引用的图片格式要注意——文档提示所有邮件客户端都能显示.png、.gif、.jpg而.svg支持很差应避免使用。3. 验证转换结果迁移文档本身没有给出专用验证步骤项目文档中可用的验证方式有两种按项目类型选用。用开发服务器实时查看create-email 项目如果你的项目是脚手架创建出来的create-email会生成一个react-email-starter文件夹内含emails目录验证方式来自 Automatic Setupnpm installnpm run dev然后访问http://localhost:3000编辑emails文件夹中的文件即可实时看到变化。把组件渲染成 HTML 字符串任意项目如果模板最终是在服务端渲染后交给邮件服务商发送Render 文档给出了程序化的验证方式导入转换后的组件调用render得到 HTML再用pretty美化输出import { MyTemplate } from ./email; import { render, pretty } from react-email; const html await pretty(await render(MyTemplate /)); console.log(html);文档示例的输出如下注意这是文档示例实际内容以你的模板为准!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html langen p stylefont-size:14px;line-height:24px;margin:16px 0Some title/p hr stylewidth:100%;border:none;border-top:1px solid #eaeaea / a hrefhttps://example.com target_blank styleline-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px spanClick me/span /a /html另外文档说明render支持plainText选项生成纯文本版本也可以用toPlainText把渲染出的 HTML 转成纯文本用于检查文本副本内容。4. 迁移中的限制与后续官方文档列出的替换组件示例是Text、Img、Button等其余 MJML 标签的对应关系文档没有逐一列出需要你在 组件文档 中逐个查找确认。迁移文档的下一步只列出了 Image、Link、Divider、Preview 几个组件的入口发送环节则参考 Integrations 中对应服务商的文档。转换完成后建议对每个模板都走一遍第 3 节的渲染验证而不是只检查某一个文件因为.mjml与.js自定义组件第 2 节第 3 条都需要逐一转换。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把 MJML 邮件项目迁移到 React Email 并将模板转换为 React 组件
如何把 MJML 邮件项目迁移到 React Email 并将模板转换为 React 组件【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email如果你的邮件项目目前基于 MJML.mjml模板 mjmlnpm 包想改用 React Email 来构建和发送邮件本文按 Migrating to React Email 给出的官方迁移步骤说明如何把依赖从mjml换成react-email并把每个 MJML 模板转换为 React 组件最后给出两种文档支持的验证方式本地开发服务器实时预览、以及把组件渲染成 HTML 字符串。1. 移除 mjml 依赖安装 react-email官方迁移文档给出的第一步是移除mjmlnpm 包安装react-email。react-email的安装命令在项目现有文档中都有记录见 Rendernpm install react-email -Eyarn add react-email -Epnpm add react-email -E移除mjml的操作在迁移文档中只有一句话Remove themjmlnpm package没有给出具体命令按你项目使用的包管理器在package.json中删除该依赖即可例如 npm 项目执行npm uninstall mjml。2. 把 .mjml 模板转换为 React 组件迁移文档对模板转换的要求是找到所有以.mjml结尾的 MJML 模板把它们转换为.tsx或.jsx的 React 组件在可能的情况下用 React Email 组件标签替换 MJML 标准组件标签文档明确列出的对应组件包括Text、Img、Button等以.js扩展名实现的自定义 MJML 组件同样要转换到.tsx或.jsx的 React 组件中。文档给出的组件用法示例// Text —— 见 apps/docs/components/text.mdx import { Text } from react-email; const Email () { return TextLorem ipsum/Text; };// Img —— 见 apps/docs/components/image.mdx import { Img } from react-email; const Email () { return Img srccat.jpg altCat width300 height300 /; };// Button —— 见 apps/docs/components/button.mdx import { Button } from react-email; const Email () { return ( Button hrefhttps://example.com style{{ color: #61dafb, padding: 10px 20px }} Click me /Button ); };把原来的一个.mjml模板改写成对应组件后大致是这种结构标签与写法取自 Render 文档中的示例import * as React from react; import { Html, Button, Hr, Text } from react-email; export function MyTemplate(props) { return ( Html langen TextSome title/Text Hr / Button hrefhttps://example.comClick me/Button /Html ); } export default MyTemplate;转换时的两点限制来自组件文档Button本质上是一个样式化过的a标签href为必填属性Img引用的图片格式要注意——文档提示所有邮件客户端都能显示.png、.gif、.jpg而.svg支持很差应避免使用。3. 验证转换结果迁移文档本身没有给出专用验证步骤项目文档中可用的验证方式有两种按项目类型选用。用开发服务器实时查看create-email 项目如果你的项目是脚手架创建出来的create-email会生成一个react-email-starter文件夹内含emails目录验证方式来自 Automatic Setupnpm installnpm run dev然后访问http://localhost:3000编辑emails文件夹中的文件即可实时看到变化。把组件渲染成 HTML 字符串任意项目如果模板最终是在服务端渲染后交给邮件服务商发送Render 文档给出了程序化的验证方式导入转换后的组件调用render得到 HTML再用pretty美化输出import { MyTemplate } from ./email; import { render, pretty } from react-email; const html await pretty(await render(MyTemplate /)); console.log(html);文档示例的输出如下注意这是文档示例实际内容以你的模板为准!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html langen p stylefont-size:14px;line-height:24px;margin:16px 0Some title/p hr stylewidth:100%;border:none;border-top:1px solid #eaeaea / a hrefhttps://example.com target_blank styleline-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px spanClick me/span /a /html另外文档说明render支持plainText选项生成纯文本版本也可以用toPlainText把渲染出的 HTML 转成纯文本用于检查文本副本内容。4. 迁移中的限制与后续官方文档列出的替换组件示例是Text、Img、Button等其余 MJML 标签的对应关系文档没有逐一列出需要你在 组件文档 中逐个查找确认。迁移文档的下一步只列出了 Image、Link、Divider、Preview 几个组件的入口发送环节则参考 Integrations 中对应服务商的文档。转换完成后建议对每个模板都走一遍第 3 节的渲染验证而不是只检查某一个文件因为.mjml与.js自定义组件第 2 节第 3 条都需要逐一转换。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考