HTML转JSX

HTML 转 JSX 工具使用指南

📌 简介

HTML 转 JSX 工具是一款专为 React 开发者打造的语法转换利器。在开发 React 应用时，我们经常需要将现有的 HTML 网页、UI 组件库的示例代码，或者从设计师那里拿到的静态页面模板引入到项目中。然而，HTML 和 JSX 在底层语法上存在诸多细微差异。直接复制粘贴会导致 React 报错。本工具能够一键自动修复这些差异，极大提升代码迁移的效率。

📖 HTML 与 JSX 的核心差异

虽然 JSX 看起来很像 HTML，但它本质上是 JavaScript 的语法扩展。因此，它必须遵守 JS 的保留字规则。常见的差异包括：1. 属性名： HTML 中的 `class` 必须改为 `className`，因为 `class` 是 JS 的保留字；`for` 必须改为 `htmlFor`。 2. 内联样式： HTML 中 style 是一个字符串（`style="color: red"`），而在 JSX 中 style 必须是一个对象（`style={{ color: 'red' }}`），且属性名必须用小驼峰（如 `marginTop`）。 3. 自闭合标签： 在 HTML5 中 `` 可以不闭合，但在 JSX 中必须写成 ``，否则编译器会报错。本工具通过正则表达式完美处理了这些自动替换逻辑。

💼 常见应用场景

• 旧项目重构： 将传统的 jQuery 或纯 HTML 项目迁移到 React 架构。
• 组件封装： 复制网上好看的 HTML 结构，转为 JSX 封装成 React 组件。
• 邮件模板开发： 快速将 HTML 邮件模板转为 React Email 等框架的语法。
• 学习 React： 直观对比 HTML 转换成 JSX 后的代码变化。

⚙️ 使用步骤

1. 将原始 HTML 代码粘贴到左侧输入框。
2. 工具会自动进行实时转换，右侧显示修正后的 JSX 语法。
3. 检查无误后，点击“复制结果”粘贴到您的 React 组件文件中。

⚠️ 注意事项

• 本工具处理的是基础的结构和属性转换。对于事件绑定（如 HTML 的 `onclick="func()"`），需手动替换为 React 的 `onClick={func}` 形式。
• 极复杂的嵌套表格或不规范的自定义标签，转换后可能需要人工微调。

❓ 常见问题 (FAQ)