HTML 转 JSX

怎么用

1. 把 HTML 粘贴到左侧 —— 一整段，或单个元素都行。
2. 填组件名，它会被转成 PascalCase 标识符，用于外层函数。
3. 开着包装为组件会得到一个可直接粘贴的函数；关掉则只输出裸 JSX。
4. 开着空标签自闭合得到 <br /> 这种写法；如果你的代码风格要求成对闭合，就关掉它。
5. 点转换，再复制或下载成 .jsx 文件。

常见用法

• 搬迁静态模板 —— 把落地页或邮件模板搬进 React 组件，不用手工改每个属性。
• 消掉属性警告 —— 规则表会改写 tabindex、readonly、maxlength、colspan、srcset 等几十个属性。
• 转换内联样式 —— style="padding: 16px; border-radius: 8px" 变成真正的对象，键名自动驼峰。
• 提前发现坏嵌套 —— 闭合标签不匹配、块级元素塞进段落，在进构建之前就被指出来。

常见问题

问：会帮我加循环里的 key 吗？ 答：不会。转换器处理的是标记，不是你的数据流。改成 .map() 的列表仍然要自己补 key。

问：为什么我的自定义属性还是小写？ 答：带连字符或命名空间前缀的属性（例如 data、aria 系列）会原样保留，只有已知的 HTML 属性名才会映射成 JSX 拼法。

问：什么算非法嵌套？ 答：闭合标签和最内层未闭合元素不匹配、块级元素出现在 <p> 里、<a> 或 <form> 嵌套自身、表格或列表的子元素不合法。每种情况都会报出标签名，而不是悄悄猜一个结果。