HTML → JSX
class→className
输入 HTML
支持标准 HTML 标签和属性
转换选项
📋 转换规则
class→className
class="box" → className="box"
for→htmlFor
for="input" → htmlFor="input"
style→style={{...}}
style="color:red" → style={{color: 'red'}}
tabindex→tabIndex
tabindex="0" → tabIndex="0"
readonly→readOnly
readonly → readOnly
checked→defaultChecked
checked → defaultChecked
selected→defaultValue
selected → defaultValue
💡 使用说明
什么是 JSX？
JSX 是 React 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码，但有一些关键差异。
主要差异
class→className（避免与 JS 关键字冲突）for→htmlFor（同样避免关键字冲突）- 内联样式使用对象语法：
style={{color: 'red'}} - 属性名使用驼峰命名：
tabindex→tabIndex - 布尔属性需要显式声明：
checked→defaultChecked
应用场景
- 将现有 HTML 迁移到 React 项目
- 快速创建 React 组件原型
- 学习 HTML 与 JSX 的差异
- 批量转换静态页面模板
最佳实践
- 转换后检查结果，确保语法正确
- 对于表单元素，考虑使用受控组件
- 移除不必要的 HTML 注释
- 确保所有标签正确闭合
- 使用语义化的 React 组件名
JSX 结果
<div className="box">Hello <span style={{ color: 'red' }}>World</span></div>HTML 行数1
JSX 行数1
HTML 字符65
JSX 字符76
转换次数2
转换对比
HTML
<div class="box">Hello <span style="color:red">World</span></div>↓
JSX
<div className="box">Hello <span style={{ color: 'red' }}>World</span></div>