关于此工具
HTML 转 JSX / React 转换器用浏览器原生的 DOMParser 解析 HTML 片段，并将其重新序列化为有效的 JSX，修复 React 所需的一切。它完全在客户端运行，因此你粘贴的标记会留在你的机器上。粘贴任何 HTML——设计导出、邮件模板、组件草图——即可获得可直接放入 React 文件的 JSX。
重写过程会重命名保留属性（class 变为 className，for 变为 htmlFor），将其余属性转为驼峰式——tabindex 转为 tabIndex，maxlength 转为 maxLength，stroke-width 转为 strokeWidth——同时保持 data-* 和 aria-* 属性不变。像 img、br、input 和 hr 这样的空元素会被设为自闭合（<img />），HTML 注释变为 {/* ... */}，文本中的字面花括号会转义为 {'{'}，内联的 style="a:b;c:d" 字符串会转换为带驼峰式 CSS 键的 style={{ a: 'b', c: 'd' }} 对象。像 disabled 这样的布尔属性可通过开关输出为裸写或 ={true}。
可选择 fragment 输出——多个根节点会自动包裹在 <>...</> fragment 中——或完整组件输出，它会将 JSX 包裹在带有你所选名称和缩进（2 个空格、4 个空格或制表符）的 export default function 中。结果可直接粘贴；由于解析使用真实的 DOM，错误的嵌套会像浏览器一样被规范化。
常见问题
哪些属性会被重命名？
class 变为 className，for 变为 htmlFor；其他带连字符或保留的属性会转为驼峰式（tabindex 转为 tabIndex，maxlength 转为 maxLength，stroke-width 转为 strokeWidth）。data-* 和 aria-* 属性会完全按原样保留。
如何处理内联样式？
一个 style="color:red;font-size:14px" 字符串会变为 style={{ color: 'red', fontSize: '14px' }}——每个 CSS 属性都转为驼峰式，每个值都输出为字符串，这对 React 内联样式始终有效。
有多个根元素时会怎样？
JSX 需要单个根，因此当你的片段有多个顶层节点时，它们会被包裹在一个 Fragment（<>...</>）中。完整组件模式则会将它们包裹在一个返回的带括号表达式中。
它会转换注释和空标签吗？
会。HTML 注释变为 JSX 注释 {/* ... */}，空元素（img、br、input、hr、meta、link 等）会渲染为自闭合的 <img />，这是 JSX 所要求的。