HTML 转 JSX（React）

把 HTML 复制到 React 组件里，在第一个 class 属性处就会出错：JSX 是 JavaScript，所以需要用 className 代替 class、htmlFor 代替 for、style 对象代替 style 字符串、驼峰式的事件和 SVG 属性名，所有元素都要闭合，文本中的花括号要转义。粘贴来自模板、设计工具或代码片段网站的 HTML，即可得到有效的 JSX，还可选择包装为函数组件，并附上在 React 中行为不同的地方的说明。

使用方法

1. 粘贴 HTML——片段或整个页面都可以（只转换 <body>）。
2. 可选：输入组件名，用 export default function 包住。
3. 选择是否把 value/checked 改为 defaultValue/defaultChecked，以及是否把内联处理程序改为箭头函数。
4. 复制 JSX 并查看备注。

计算公式

class → className · for → htmlFor · tabindex → tabIndex · style="a-b: c" → style={{ aB: "c" }} · onclick="f()" → onClick={(event) => { f() }} · <br> → <br />

属性遵循 React 的 DOM 属性名；data-* 和 aria-* 保持不变。在 <svg> 内，带连字符的属性变成驼峰式（stroke-width → strokeWidth），小写名称会被还原（viewbox → viewBox）。JSX 保留的文本字符会被转义：{ 和 } 变为 {'{'} 和 {'}'}，> 变为 &gt;。注释变为 {/* */}。多个顶层节点会被 <> 片段包裹。缺失的可选结束标签（li、p、td…）会被补上。

示例

在示例中，class="card" 变为 className，style 字符串变为 style={{ padding: "16px", borderRadius: "8px" }}，for="email" 变为 htmlFor，<input … value="" autofocus tabindex="1"> 变为 <input … defaultValue="" autoFocus tabIndex="1" />，onclick="subscribe()" 变为 onClick={(event) => { subscribe() }}，“立即加入 {免费}” 里的花括号被转义，SVG 内的 viewbox 和 stroke-width 变为 viewBox 和 strokeWidth。结果被包进 SignupCard 组件，注释以 {/* 注册卡片 */} 的形式保留在片段内。