Output will appear here...
关于 HTML 转 JSX
JSX 是 React 的语法扩展，看起来像 HTML 但有重要区别。将 HTML 模板迁移到 React 组件时，需要将 class 转为 className，for 转为 htmlFor，内联样式字符串转为 JavaScript 对象，并确保所有标签正确闭合。本工具自动完成所有这些转换。它处理自闭合空元素、转换 HTML 注释为 JSX 注释、并将常见 HTML 属性转换为 JSX 等效属性。非常适合将静态 HTML 网站迁移到 React。
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
常见问题
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 />。
使用方法
- 将 HTML 标记粘贴到输入面板
- 点击转换以转换为 JSX
- 检查转换后的 JSX 输出
- 复制并粘贴到 React 组件中
常见用例
- 将静态 HTML 模板迁移到 React 组件
- 将设计工具（Figma、Webflow）的 HTML 转换为 JSX
- 将 HTML 邮件模板移植到 React Email
- 学习 HTML 和 JSX 语法的区别