HTML 转 JSX 主要涉及以下转换：

• class → className：因为 class 是 JavaScript 的保留关键字。
• for → htmlFor：for 同样是 JS 保留关键字，用于 label 标签。
• 内联 style：从字符串 style="color:red" 转为对象 style={'{'}color:'red'{'}'}。
• 事件属性：如 onclick → onClick，采用 camelCase 命名。
• 自闭合标签：<br> 必须写为 <br />，<img> 必须闭合。
• HTML 注释：<!-- --> 转为 {'/* */'}。
• 连字符属性：如 tabindex → tabIndex，aria-label 则保持不变。

React 使用 JSX 语法，它本质上是 JavaScript 的语法扩展。在 JavaScript 中，class 是一个保留关键字（用于定义类）。为了避免冲突，React 团队选择了 className 作为替代。在底层，JSX 会被编译为 React.createElement() 调用，属性名需要是合法的 JavaScript 标识符。同样道理，for 属性（用于 <label>）被替换为 htmlFor。

在 JSX 中，style 属性接受一个 JavaScript 对象，而不是字符串：

HTML：style="color: red; font-size: 16px;"

JSX：style={'{'} color: 'red', fontSize: '16px' {'}'}

注意：CSS 属性名必须使用 camelCase（如 font-size → fontSize），属性值通常用字符串包裹（纯数字值可以不加引号）。本工具会自动完成这个转换。

在 JSX 中，所有标签都必须正确闭合。以下 HTML 空元素在 JSX 中必须以 /> 结尾：

<area />、<base />、<br />、<col />、<embed />、<hr />、<img />、<input />、<link />、<meta />、<param />、<source />、<track />、<wbr />

例如 <img src="photo.jpg"> 在 JSX 中必须写为 <img src="photo.jpg" />，否则会报错。

好消息是：data-* 和 aria-* 属性在 JSX 中保持原样，不需要转换！

例如：data-user-id="123" 和 aria-label="关闭" 在 JSX 中写法完全相同。这是因为它们使用连字符命名，不会与 JavaScript 保留关键字冲突，React 也原生支持这些属性。本工具会自动识别并保留这些属性不变。

React 19 对 JSX 做了一些改进，但属性命名基本保持一致。主要变化在于：

• React 19 中，ref 可以直接作为 prop 传递，不再需要 forwardRef。
• 自定义元素的属性处理更加宽松。
• className、htmlFor 等核心转换规则保持不变。

本工具生成的 JSX 代码兼容 React 17、18 和 19。

大部分情况下可以直接使用，但需要注意：

• 如果原 HTML 包含 <script> 标签，在 JSX 中需要特殊处理（通常使用 dangerouslySetInnerHTML 或移到组件逻辑中）。
• 内联事件处理器（如 onclick="doSomething()"）转换后变为 onClick="doSomething()"，但在 React 中应该使用函数引用而非字符串，你需要手动调整为 onClick={'{'}doSomething{'}'}。
• HTML 实体（如  ）在 JSX 中通常可以保留，但在某些情况下可能需要用 Unicode 替代。

建议转换后检查事件处理函数和脚本相关部分。

SVG 在 JSX 中的属性也需要 camelCase 转换：

• stroke-width → strokeWidth
• fill-opacity → fillOpacity
• clip-path → clipPath
• stroke-dasharray → strokeDasharray
• xlink:href → xlinkHref（或直接使用 href）

本工具会自动处理 SVG 相关的属性转换。