将 HTML 代码在线转换为 React JSX 格式。自动处理 className、htmlFor、驼峰属性、style 对象、自闭合标签。免费、免登录、本地处理。
摘要：免费的在线 HTML 转 JSX 转换器，自动将 class 转为 className、for 转为 htmlFor，处理 style 内联样式对象化，支持复制和下载，本地运行数据不外泄。
此工具完全在您的浏览器中运行。打开 DevTools → Network 面板，搜索您的输入内容——它不会出现在任何请求中。
下一步
使用指南
从设计稿或旧页面拷来的 HTML，直接贴进 React 会报一堆属性错误：class 不是 className，for 不是 htmlFor，style 还是字符串。本工具把常见 HTML 属性批量改成 JSX 写法，并处理自闭合标签与内联 style 对象——本地转换，适合迁移小片段。
1. 转换一段 HTML
转换是基于正则的属性重写，不是完整 HTML 解析器。对结构良好的片段很有效；对严重残缺或含模板语法（Vue/Angular）的标记，请先清理再转。
- 左侧粘贴 HTML 片段（可用「加载示例」先看效果）。
- 右侧即时输出 JSX：class→className、for→htmlFor、tabindex→tabIndex 等。
- 内联 style="a: b" 会转成 style={{ a: b }}；复制后贴进组件。
2. 会自动处理的类别
onclick="..." 这类 HTML 事件属性不会自动变成 onClick={handler}——JSX 需要传入函数引用。转换后请把内联事件改成 React 事件处理器，并把内联脚本移出标记。
- DOM 属性驼峰化：maxLength、readOnly、autoComplete、colSpan、crossOrigin 等。
- style 字符串 → JS 对象；可纯数字的 CSS 值会去掉引号（如 width: 100）。
- img / input / br 等空元素补成自闭合 /> 形式。
3. 转换后还要人工看的点
相关下一步：需要整理标记可读性时用 HTML 格式化；要进 Markdown 文档用 HTML↔Markdown。本页专注「能进 JSX 编译」的属性层转换。
- 注释、条件注释、IE 专用标记：React 不支持，删掉或改写。
- SVG 大量属性（stroke-width 等）可能仍需手改驼峰。
- class 里若已是 CSS Modules / Tailwind 语义，确认转换后 className 与项目写法一致。
- 大段静态页更适合逐步组件化，而不是一次转完整站 HTML。
常见问题
完全免费，无需注册。直接在浏览器中粘贴 HTML 即可转换为 JSX，所有操作在本地完成。
自动转换 class 为 className、for 为 htmlFor、tabindex 为 tabIndex、readonly 为 readOnly 等 React 要求的驼峰命名属性，并将内联 style 字符串对象化。
不会。转换都在你的浏览器本地完成，数据不会上传到任何服务器，保障隐私。
相关工具
相关文章
HTML 转 JSX 完全指南：React 开发者必备技巧
深入理解 HTML 与 JSX 的差异，掌握 className、style 对象、驼峰属性等转换要点，快速将 HTML 片段迁移到 React 项目。
Unexpected token '<' is not valid JSON？接口返回 HTML 而不是 JSON 的 5 种原因
fetch 请求报 SyntaxError: Unexpected token '<' 是因为响应体是 HTML 不是 JSON。覆盖 5 种根因：SPA 路由兜底返回 index.html、登录 302 重定向、网关 502 错误页、baseURL 写错、忘了检查 res.ok，附 curl 排查命令。
HTML 表格转 JSON 怎么保留行列结构？
把网页里的 HTML 表格转成 JSON，怎么保留表头、处理合并单元格、保持嵌套结构？逐步方法并附本站 HTML 表格转 JSON 工具。