# @faire/mjml-react 中文文档

规范地址：https://npmcn.com/package/%40faire/mjml-react/

版本：4\.0\.1
npm 元数据更新时间：2026-06-01T13:19:47.292Z
中文译文更新时间：2026-11-14T09:01:46.243Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40faire/mjml-react
原文对照：https://npmcn.com/package/%40faire/mjml-react/?lang=original
项目主页：https://github.com/Faire/mjml-react
源码仓库：https://github.com/Faire/mjml-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：137 kB，164 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：mjml ^5\.0\.0，react ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-09-21T17:44:38.066Z
- 最新版本发布：2026-06-01T13:19:46.969Z
- 近 30 天下载量：593561（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 3 个）

## 中文简介

执行组件库生成苍蝇上的 HTML 电子邮件

## 安装

```sh
npm install @faire/mjml-react
```

也可以使用：`pnpm add @faire/mjml-react`、`yarn add @faire/mjml-react`、`bun add @faire/mjml-react`

## README

[跳转到开始](https://npmcn.com/package/%40faire/mjml-react/#readme-getting-started)

## 工程科的通知@ faire

你好,Mjml社区,我们在Faire很兴奋地宣布,我们将接管维持开源的Mjml反应项目!

在过去的一年里,费尔广泛使用了mjml反应. 这个软件包使我们能够融入mjml的所有好处,而不必要求我们的开发者在从网络转移到电子邮件时学习一个新的dev环境. 因此,我们大大减少了创建电子邮件的开发努力,同时将电子邮件将问题传播到最低限度.

我们从Mjml反应中看到了很多好处, 这就是为什么我们要继续维持这个一揽子计划,用我们自己的一些新想法来改进它! 现在,你可以检查我们 在 [@faire/mjml-反应](https://github.com/Faire/mjml-react)我们希望这能在多数情况下成为Mjml反应的倒置替代,但如果有任何问题,我们急于与你合作。 不要犹豫 [MJML Slack集团](https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg) 或归档 a [有问题](https://github.com/Faire/mjml-react/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)从那里,你可以期待新的改进即将到来.

当然,我们想向维克斯团队 表示热烈的感谢, 感谢它建设并维持了这个项目.

# mjml -反应.. [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/faire/mjml-react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@faire/mjml-react)](https://www.npmjs.com/package/mjml-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/faire/mjml-react/pulls)

![](https://cdn.worldvectorlogo.com/logos/mjml-by-mailjet.svg) • 妇女 

有个很棒的图书馆 [米姆尔](https://mjml.io/) 上面写着github repo [https://github.com/mjmlio/mjml 页面存档备份,存于互联网档案馆](https://github.com/mjmlio/mjml)。 。 。 .

`MJML` 是一种由 [邮件喷射](https://www.mailjet.com/)。 。 。 . 因此,为了在苍蝇上创建电子邮件,我们创建了图书馆 `React` 组件.

## 今天以 V2 开始 - 100% 向后兼容 [https://github.com/wix-incubator/mjml-resact/ (中文(中国大陆) )](https://github.com/wix-incubator/mjml-react/)

V2是用于 [https://github.com/wix-incubator/mjml-resact/ (中文(中国大陆) )](https://github.com/wix-incubator/mjml-react/),并获得一些额外的支持。 如果缺少组件,你可以做公关反对 [https://github.com/Faire/mjml-resact/tree/main-v2 页面存档备份,存于互联网档案馆](https://github.com/Faire/mjml-react/tree/main-v2) 或者提出一个问题 我们试着解开你的封口.

## V3有什么新鲜事??

我们希望Mjml反应的V3能够相当容易地从V2迁移到.

-   字典:mjml-反应现在用字典来写,有助于确保正确的道具传递到mjml组件
-   完整的mjml组件支持:我们使用自动脚本来拉出mjml组件并创建相应的mjml-反应组件. 这意味着我们得到了所有组件的全力支持 最新的mjml版本
-   其他小的更改:在 mjml-反应中为 mjml 结尾标记添加危险Set InnerHTML , 更新测试, 在代码中添加 docuenation

## 开始

1.  根据您的渲染环境在 mjml 或 mjml- 浏览器中选择渲染 。 还包括所需额外依赖.

节点 :

```bash
npm install @faire/mjml-react mjml react react-dom
```

浏览器 :

```bash
npm install @faire/mjml-react mjml-browser react react-dom
```

2.  连接您的渲染函数( uncomment) `mjml` 或者说 `mjml-browser`(中文(简体) )

```tsx
import { renderToMjml } from "@faire/mjml-react/utils/renderToMjml";
// import mjml2html from "mjml";
// import mjml2html from "mjml-browser";
import { MJMLParseResults } from "mjml-core";
import React from "react";

export function renderReactToMjml(
  email: React.ReactElement
): Promise<MJMLParseResults> {
  return mjml2html(renderToMjml(email));
}
```

3.  然后写一个像专业的代码:

```tsx
import {
  Mjml,
  MjmlHead,
  MjmlTitle,
  MjmlPreview,
  MjmlBody,
  MjmlSection,
  MjmlColumn,
  MjmlButton,
  MjmlImage,
} from "@faire/mjml-react";

import { renderReactToMjml } from "./renderReactToMjml";

const { html, errors } = await renderReactToMjml(
  <Mjml>
    <MjmlHead>
      <MjmlTitle>Last Minute Offer</MjmlTitle>
      <MjmlPreview>Last Minute Offer...</MjmlPreview>
    </MjmlHead>
    <MjmlBody width={500}>
      <MjmlSection fullWidth backgroundColor="#efefef">
        <MjmlColumn>
          <MjmlImage src="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg" />
        </MjmlColumn>
      </MjmlSection>
      <MjmlSection>
        <MjmlColumn>
          <MjmlButton
            padding="20px"
            backgroundColor="#346DB7"
            href="https://www.wix.com/"
          >
            I like it!
          </MjmlButton>
        </MjmlColumn>
      </MjmlSection>
    </MjmlBody>
  </Mjml>,
  { validationLevel: "soft" }
);
```

因此,您将获得一个好看的电子邮件 HTML(手机中的工作也)

![preview](https://user-images.githubusercontent.com/10008149/41058394-59b8ce9e-69d2-11e8-9eb9-c294f35bae9f.png)

## 选项

@faire/ mjml- react 在渲染到 HTML 时设置了以下 MJML 选项 :

```js
{
  keepComments: false,
  beautify: false,
  minify: false,
  minifyOptions: {
    collapseWhitespace: true,
    minifyCss: true,
    removeComments: "safe",
    removeEmptyAttributes: true,
  },
  validationLevel: 'strict'
}
```

如果您想要覆盖这些对象, 您可以将对象传递到 `render` 作为第二个论点。 见 [MJML 文档](https://documentation.mjml.io/#inside-node-js) 对于您可以设置的全部选项列表.

## 扩展

```js
import {
  MjmlHtml,
  MjmlComment,
  MjmlConditionalComment
} from '@faire/mjml-react/extensions';

<MjmlComment>Built with ... at ...</MjmlComment>
// <!--Built with ... at ...-->

<MjmlConditionalComment>MSO conditionals</MjmlConditionalComment>
// <!--[if gte mso 9]>MSO conditionals<![endif]-->

<MjmlConditionalComment condition="if IE">MSO conditionals</MjmlConditionalComment>
// <!--[if IE]>MSO conditionals<![endif]-->

<MjmlHtml tag="div" html="<span>Hello World!</span>" />
// <div><span>Hello World!</span></div>
```

## 用户

我们也有一些用于处理输出 HTML 的功能. 因为并非所有邮件客户端都会支持命名为 HTML 的实体, 如 `&apos;`。 。 。 . 所以我们得把它们换成六分卫.

```js
import {
  namedEntityToHexCode,
  fixConditionalComment,
} from "@faire/mjml-react/utils";

const html = "<div>&apos;</div>";
namedEntityToHexCode(html);
// <div>&#39;</div>

fixConditionalComment(
  "<!--[if mso]><div>Hello World</div><![endif]-->",
  "Hello",
  "if IE"
);
// <!--[if IE]><div>Hello World</div><![endif]-->
```

## 限制

现 `mjml` 财务报告和审定财务报表 `@faire/mjml-react` 图书馆是用来在一个节点内运行的.

## 示例项目

您可以在此找到一个示例工程 [https://github.com/wix-incubator/mjml-反应-实例 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/wix-incubator/mjml-react-example)

## 常见问题

### @faire/mjml-react 是什么？

执行组件库生成苍蝇上的 HTML 电子邮件

### 如何安装 @faire/mjml-react？

在项目目录运行 npm install @faire/mjml-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：mjml（^5\.0\.0）、react（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @faire/mjml-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @faire/mjml-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @faire/mjml-react 可以商用吗？

@faire/mjml-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @faire/mjml-react 的下载量有多少？

根据 npm 官方下载统计，@faire/mjml-react 在 2026/10/14 – 2026/11/12 这 30 天内被下载 593,561 次，日均约 19,785 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @faire/mjml-react 还在维护吗？

最新版本 4\.0\.1 发布于 2026/06/01（5 个月前）；至今共发布 30 个版本，其中过去 12 个月发布了 3 个；首次发布于 2022/09/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。