HTML 转 JSX 工具

本工具自动完成以下核心转换：
① class → className（因为 class 是 JavaScript 保留字）
② for → htmlFor（label 的 for 属性）
③ 内联 style：从字符串 style="color:red;font-size:14px" 转为对象 style={{color:'red',fontSize:'14px'}}
④ 事件属性驼峰化：onclick → onClick，onchange → onChange 等
⑤ 自闭合标签：<br> → <br />，<img src="..."> → <img src="..." />
⑥ HTML 注释：<!-- ... --> → {/* ... */}
⑦ 驼峰属性：tabindex → tabIndex，readonly → readOnly 等

JSX 本质上是 JavaScript 的语法扩展，会被编译为 React.createElement() 调用。由于 class 是 JavaScript 的保留关键字（用于定义类），直接在 JSX 中使用会造成语法冲突。因此 React 团队采用了 className 作为替代。同样地，for 也是保留关键字（用于循环），所以在 JSX 中 label 元素使用 htmlFor。

在 JSX 中，style={{color: 'red', fontSize: '14px'}} 的双大括号其实包含两层含义：
外层 {} 表示"这是 JavaScript 表达式"（JSX 语法）
内层 {} 表示"这是一个 JavaScript 对象字面量"

所以实际上是：在 JSX 中嵌入了一个样式对象。这与 HTML 中 style="color:red" 的字符串形式完全不同。CSS 属性名需要转为驼峰命名（如 font-size → fontSize），数值型值如 12px 需要加引号变成字符串。

JSX 严格遵循 XML 规则，所有标签必须正确闭合。以下 HTML void 元素在 JSX 中需要写成自闭合格式：
<area />、<base />、<br />、<col />、<embed />、<hr />、<img />、<input />、<link />、<meta />、<param />、<source />、<track />、<wbr />

如果忘记闭合，JSX 编译会报错。本工具会自动检测并添加 /> 结尾。

HTML 中的事件属性（全小写）在 JSX 中需要转为驼峰命名，并且值是一个函数引用（用 {} 包裹），而非字符串：

HTML	JSX
onclick="handle()"	onClick={handle}
onchange="..."	onChange={...}
onsubmit="..."	onSubmit={...}
onkeydown="..."	onKeyDown={...}
onfocus="..."	onFocus={...}
onmouseover="..."	onMouseOver={...}

注意：本工具会自动转换事件属性名，但事件处理函数的值（字符串）需要您手动改为函数引用。

大部分情况下可以，但需要注意以下几点：
① 事件处理函数（如 onClick={handleClick()}）的值需要是函数引用，而非字符串。工具会转换属性名，但值需要您手动调整。
② 如果原 HTML 中有 <script> 标签，在 JSX 中通常不可直接用，需要移除或使用 dangerouslySetInnerHTML。
③ 模板变量（如 Vue 的 {{ }} 或 Angular 的 *ngIf）不在本工具转换范围内，需手动改为 React 的 JSX 表达式。
④ 建议将转换结果复制到编辑器中后，根据实际业务逻辑进行微调。

React 的内联样式对象要求 CSS 属性名使用驼峰命名（camelCase），且所有值必须是字符串。常见易错点：
① font-size → 必须写为 fontSize
② background-color → backgroundColor
③ margin-top → marginTop
④ 数值需要带单位：width: '100px'（不能写 width: 100，除非该属性默认单位是 px）
⑤ vendor prefix 需要大写：WebkitTransition、MozTransform
本工具会自动完成 CSS 属性名到驼峰格式的转换，并确保值被正确加引号。

本工具目前支持单个 HTML 片段的即时转换。如果您需要批量处理多个文件，建议：
① 使用本工具逐个粘贴转换，利用"复制结果"和"下载 JSX"功能快速收集输出。
② 配合代码编辑器的查找替换功能（如 VS Code 的正则替换），批量处理 class → className 等常规替换。
③ 对于大型项目，可以考虑使用专业的 HTML-to-JSX 转换库或 CLI 工具（如 html-to-react-components）进行自动化迁移。
④ 本工具的优势在于即时可视化、无需安装、支持 style 对象深度转换和事件驼峰处理，适合中小规模的手动迁移工作。