HTML 转 JSX 转换器

在线将 HTML 转换为 React JSX。将 class 转为 className，style 字符串转为对象，自动闭合标签等。免费即时转换。

HTML

JSX

关于 HTML 转 JSX

JSX 是 React 的语法扩展，看起来像 HTML 但有重要区别。将 HTML 模板迁移到 React 组件时，需要将 class 转为 className，for 转为 htmlFor，内联样式字符串转为 JavaScript 对象，并确保所有标签正确闭合。本工具自动完成所有这些转换。它处理自闭合空元素、转换 HTML 注释为 JSX 注释、并将常见 HTML 属性转换为 JSX 等效属性。非常适合将静态 HTML 网站迁移到 React。

𝕏 Twitter in LinkedIn

评价此工具

4.5 / 5 · 202 人评价

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?

☕Buy Me a Coffee

使用方法

将 HTML 标记粘贴到输入面板
点击转换以转换为 JSX
检查转换后的 JSX 输出
复制并粘贴到 React 组件中

常见用例

将静态 HTML 模板迁移到 React 组件
将设计工具（Figma、Webflow）的 HTML 转换为 JSX
将 HTML 邮件模板移植到 React Email
学习 HTML 和 JSX 语法的区别

常见问题

HTML 转 JSX 会改变什么？

主要变化：class → className，for → htmlFor，内联样式字符串 → 样式对象，自闭合标签添加 />，HTML 注释 → {/* */}，事件处理器变为驼峰命名。

为什么 JSX 中不能使用 class？

在 JSX 中，'class' 是 JavaScript 保留关键字。React 使用 'className' 替代。类似地，'for' 变为 'htmlFor'。

内联样式如何转换？

CSS 样式字符串如 style="color: red; font-size: 16px" 转换为样式对象：style={{color: "red", fontSize: "16px"}}。

是否处理自闭合标签？

是的。HTML 空元素如 <br>、<hr>、<img>、<input> 转换为自闭合 JSX：<br />、<hr />。