HTML 转 JSX 转换器

在浏览器中即时将 HTML 转换为 React JSX。自动处理 className、htmlFor、内联样式对象、驼峰命名事件和自闭合标签。免费无需注册。

在浏览器中处理
数据不离开你的设备
免费 · 无需注册

示例、说明与常见问题带实际输出的示例、与同类工具的差别，以及常见问题。

转换规则

HTML	JSX
`class="..."`	`className="..."`
`for="..."`	`htmlFor="..."`
`style="color:red"`	`style={{ "color": "red" }}`
`onclick="save()"`	`onClick={(event) => { save() }}`
`ondblclick="..."` / `onmouseover="..."`	`onDoubleClick={...}` / `onMouseOver={...}`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`maxlength`	`maxLength`
`colspan`	`colSpan`
`rowspan`	`rowSpan`
`crossorigin`	`crossOrigin`
`contenteditable`	`contentEditable`
`<br>`	`<br />`
`<img src="...">`	`<img src="..." />`
`<input ...>`	`<input ... />`
`<!-- 注释 -->`	`{/* 注释 */}`
文本 `{name}`、`a < b`	`{name}`、`a < b`

常见使用场景

将静态 HTML 模板迁移为 React 组件
将设计工具（Figma、Webflow）导出的 HTML 片段粘贴到 JSX 文件中
学习 HTML 与 JSX 属性命名的区别
将 HTML 邮件模板转换为 React 邮件库可用的格式
快速将第三方 HTML 组件适配到 React 项目

示例

输入：

<label for="email" class="lbl">Email</label>
<input id="email" type="email" required>
<div style="background-image: url('a.png'); font-size:14px">x</div>
<!-- footer -->

输出：

<label htmlFor="email" className="lbl">Email</label>
<input id="email" type="email" required />
<div style={{ "backgroundImage": "url('a.png')", "fontSize": "14px" }}>x</div>
{/* footer */}

data-* 和 aria-* 属性保持连字符写法，这正是 React 的要求。数字属性保留为字符串，如 colSpan="2"，React 可以接受。

仍需手动修改的地方

转换结果	在 React 中的问题	改为
`onClick={(event) => { save(); return false; }}`	代码在箭头函数里运行：`this` 不是元素，`return false` 也不会阻止默认行为	用 `event.currentTarget`、`event.preventDefault()`，或直接传函数 `onClick={save}`
`<input type="checkbox" checked>`	有 `checked` 却没有 `onChange`，字段变成只读	`defaultChecked`
`<option selected>`	React 在 `<select>` 上设置选中项	`<select defaultValue="...">`
`<textarea>hi</textarea>`	`<textarea>` 不接受子节点	`<textarea defaultValue="hi" />`
`style="color:red !important"`（无输出）	被拒绝：React 样式对象无法保留 `!important`，输出被清空	把规则移到 CSS 的 class 里，或去掉 `!important`
两个及以上顶层元素	组件只能返回一个元素	用 `<>...</>` 包起来
`<path stroke-width="2">`	SVG 属性不会被转换	用 SVG 转 JSX

限制

属性值原样保留。 只转换属性名，href="/search?for=1&class=2" 不会被改动，这与 htmltojsx 的做法相同。有两类值会变：style 转成对象；事件处理器的代码放进 (event) => { ... }，因为 React 需要函数而不是字符串，代码里的 " 等实体会被解码。不是 DOM 事件的 on* 属性（如自定义元素上的 onfoo）原样保留。
文本字符不变。 标签之间文本里的 {、}、<、> 写成 {、}、<、>，JSX 会还原成同样的字符，所以 <p>{name}</p> 显示文字 {name}，不会读取变量。其他文本原样保留；粘贴整个文档时，<!DOCTYPE>、<html>、<head>、<body> 也会留在结果里。只粘贴要放进组件的部分。
无法保留的样式会被拒绝。 !important、同一属性写两次（如 color:red;color:blue 这类 CSS 回退）、CSS 注释、含转义的属性名、未闭合的引号或括号都会停止转换：清空输出、停用复制，状态栏写明样式中的字符位置，例如「样式第 11 个字符无法转换：React 样式对象无法保留 !important」。其他值（包括 url(data:…;base64,…) 与 --accent 这类自定义属性）作为 JSON 字符串逐字复制。
不生成组件外壳。 输出只是标记，放进组件的 return (...) 里使用。

FAQ

HTML 转 JSX 工具做什么？

它将标准 HTML 标记转换为合法的 React JSX 语法。主要变更包括：将 class 重命名为 className，将 for 重命名为 htmlFor，将内联样式转换为 JavaScript 对象，将事件属性改为 React 的驼峰名并把代码包成函数，以及为自闭合标签添加显式斜线。

JSX 中为什么用 className 而不是 class？

JSX 会被编译为 JavaScript，而 class 是 JavaScript 的保留关键字。React 使用 className 来避免冲突，转换器会自动处理这个重命名。

内联样式如何转换？

HTML 内联样式使用字符串：style="color: red; font-size: 14px"。JSX 需要对象，转换器输出 style={{ "color": "red", "fontSize": "14px" }}。只在顶层分号处拆分声明，引号或 url(data:…) 里的分号留在值里；--accent 这类自定义属性按原名保留，每个值逐字复制。React 样式对象无法保留的写法（!important、同一属性写两次、CSS 注释、引号或括号未闭合）会被拒绝：清空输出、停用复制，状态栏给出字符位置。

HTML 注释会变成什么？

HTML 注释（）会被转换为 JSX 表达式注释（{/* text */}），这是 React JSX 解析器唯一接受的注释形式。

数据会发送到服务器吗？

不会。转换在浏览器中通过 JavaScript 运行，不传输任何数据。