HTML转JSX React代码转换器 - 小丫开发工具站

转换配置选项

生成完整React组件代码启用TypeScript TSX语法使用箭头函数组件包裹React.memo缓存组件

组件名称：

HTML源码输入区域

 <div class="container"> <header class="header"> <nav class="nav"> <a href="#home" class="nav-link active">首页</a> <a href="#about" class="nav-link">关于</a> </nav> </header> <main class="content"> <h1 class="title">欢迎使用</h1> <p style="color: red; font-size: 16px;">这是一段示例文本</p> <img src="image.jpg" alt="示例图片" class="image"> <button onclick="handleClick()" class="btn">点击我</button> <input type="text" value="默认值" readonly disabled> <label for="email">邮箱:</label> <input type="email" id="email" tabindex="1" maxlength="50"> <!-- 这是注释 --> <div data-id="123" aria-label="标签"></div> </main> </div>

字符：0 | 行数：0

JSX / TSX 转换结果

字符：0 | 行数：0

HTML转JSX属性转换对照表

原生HTML属性	React JSX对应属性	转换说明
`class`	`className`	HTML类名属性转为React className
`for`	`htmlFor`	label标签关联属性转换
`onclick`	`onClick`	事件名称转为JSX驼峰写法
`tabindex`	`tabIndex`	焦点索引属性驼峰转换
`maxlength`	`maxLength`	输入框最大长度属性转换
`readonly`	`readOnly`	只读状态属性驼峰转换
`style="..."`	`style={{...}}`	行内css自动转为JSX对象格式
`<!-- -->`	`{/* */}`	html注释转为JSX花括号注释

使用说明书

HTML转JSX React代码转换器，在线工具，适用于前端开发人员把已写好的静态HTML页面快速迁移到React项目，不用手动修改大量标签属性。
支持批量转换HTML属性，自动完成class转className、onclick转onClick、原生事件转JSX驼峰事件，省去大量重复手工修改工作，无转换次数限制。
支持HTML内联css样式自动解析，转换成React JSX所需的style对象格式，自动处理像素单位与样式属性驼峰命名。
可选择生成完整React函数组件代码，支持TSX类型脚本、箭头函数写法、React.memo组件缓存，导出.jsx或者.tsx文件直接引入React项目。
支持HTML注释转换为JSX注释，自动处理img、input、br等HTML自闭合标签，补全JSX要求的斜杠语法。
适合网页静态页面转React组件、UI原型HTML转JSX、设计稿导出HTML代码转React页面、老旧网页迁移React框架等开发场景。
使用方式：粘贴原始HTML代码，在上方勾选组件配置选项，点击执行HTML转JSX，转换完成后复制代码或者直接下载jsx文件。