mjml-react 项目常见问题解决方案

mjml-react 项目常见问题解决方案

mjml-react React component library to generate the HTML emails on the fly 项目地址: https://gitcode.com/gh_mirrors/mj/mjml-react

一、项目基础介绍

mjml-react 是一个基于 React 的组件库，用于生成 HTML 邮件。它利用 MJML（Mailjet Markup Language）这一标记语言，使得开发者能够快速创建出响应式和美观的邮件。项目主要使用的编程语言是 JavaScript。

二、新手常见问题及解决步骤

问题1：如何安装 mjml-react？

解决步骤：

1. 确保你已经安装了 Node.js。
2. 使用 npm 或 yarn 安装所需的依赖：

   npm install react react-dom mjml mjml-react
   

   或者

   yarn add react react-dom mjml mjml-react
   

问题2：如何使用 mjml-react 创建一个简单的 HTML 邮件？

解决步骤：

1. 导入 mjml-react 的相关组件：

   import { render, Mjml, MjmlHead, MjmlTitle, MjmlPreview, MjmlBody, MjmlSection, MjmlColumn, MjmlButton, MjmlImage } from 'mjml-react';
   

2. 使用这些组件编写你的邮件内容：

   const [html, errors] = render(
     <Mjml>
       <MjmlHead>
         <MjmlTitle>Last Minute Offer</MjmlTitle>
         <MjmlPreview>Last Minute Offer</MjmlPreview>
       </MjmlHead>
       <MjmlBody width="500">
         <MjmlSection fullWidth backgroundColor="#efefef">
           <MjmlColumn>
             <MjmlImage src="image-url.jpg" />
           </MjmlColumn>
         </MjmlSection>
         <MjmlSection>
           <MjmlColumn>
             <MjmlButton padding="20px" backgroundColor="#346DB7" href="https://www.example.com">I like it</MjmlButton>
           </MjmlColumn>
         </MjmlSection>
       </MjmlBody>
     </Mjml>,
     { validationLevel: 'soft' }
   );
   

3. 将生成的 HTML 字符串用于邮件发送。

问题3：如何自定义 mjml-react 的渲染选项？

解决步骤：

1. 在调用 render 函数时，可以传递一个选项对象来自定义 MJML 的渲染选项。
2. 以下是一些可用的选项：

   {
     keepComments: false, // 是否保留注释
     beautify: false, // 是否美化输出
     minify: true, // 是否压缩输出
     validationLevel: 'strict' // 验证级别
   }
   

3. 根据需要修改这些选项，例如：

   const [html, errors] = render(
     <Mjml>...</Mjml>,
     {
       keepComments: true,
       beautify: true,
       minify: false,
       validationLevel: 'soft'
     }
   );
   

通过以上步骤，你可以解决在使用 mjml-react 时遇到的一些常见问题。

mjml-react React component library to generate the HTML emails on the fly 项目地址: https://gitcode.com/gh_mirrors/mj/mjml-react