SVG/HTML 转 JSX
把 HTML / SVG 片段转成 React JSX：class→className、style 字符串转对象、自闭合标签与转义实体一并处理；贴设计稿给的 SVG 很省事。
>_ 使用指南 · GUIDE
把 HTML 或 SVG 片段转成 React JSX：class 变成 className、style 字符串转成对象、自闭合标签与实体转义一并处理。把设计稿导出的 SVG 或一段现成 HTML 搬进 React 组件时，能省掉大量手工改名。
需要理解的是 JSX 与 HTML 的主要差异：属性多数要驼峰化（如 tabindex → tabIndex）、style 由字符串改为 JSON 对象、保留字要换名（for → htmlFor）、连字符属性名转成驼峰（SVG 里的 stroke-width → strokeWidth）。本工具做的是这些词形转换，不保证语义等价，转换后仍需你在 React 里验证是否还有报错。
典型步骤：
- 粘贴 HTML / SVG 片段：放入待转换的源码
- 转换：执行转换
- 检查属性与 style 结果：核对驼峰属性与 style 对象
- 复制为 JSX / 组件：粘进你的 React 代码
>_ 常见问题 · FAQ
Q1 · class 和 style 会被怎么转换？
class 会被改成 className（React 里 class 是保留字）。style 会从 CSS 字符串转成 JSX 对象，例如 style="color: red; font-size: 12px" 转成 style={{ color: 'red', fontSize: '12px' }}，其中连字符属性名（如 font-size）也会一并驼峰化。
Q2 · SVG 能转成 SVG 组件吗？
可以。粘贴 SVG 片段后，工具会把 class、style 以及 SVG 专有属性（如 stroke-width → strokeWidth、fill-rule → fillRule）转成 JSX 兼容写法，输出可直接放进组件的 JSX。若需要组件外壳，在结果外层包上你的函数组件与 return 即可。
Q3 · 为什么转换后 React 里还有报错？
因为这是词法转换、不保证语义等价。常见残留：内联事件仍写成 onclick 字符串、自定义 data-* 之外的非法属性、或样式里用了 JSX 对象不接受的写法。请按 React 的报错提示逐项修正，工具只负责属性名与 style 的机械转换。
Q4 · 注释和自闭合标签怎么处理？
HTML 注释会被转换为 JSX 注释写法（{/* ... */}），不再原样保留 <!-- -->。自闭合标签如 <img>、<br> 会被补成 <img />、<br />，符合 JSX 必须自闭合的要求。
Q5 · 和「HTML 实体编解码」「XML 格式化」工具的分工是什么？
定位不同：HTML 实体编解码（html）处理 & 这类实体与字符的互转，XML 格式化（xml）做结构美化与校验，而本工具面向 React JSX 输出，重点在属性驼峰化与 style 转对象。要处理实体用前者，要格式化 XML 用后者，要转 JSX 用本工具。