转换 HTML to JSX for React
JSX 是 HTML 具有 JavaScript expressions. 转换 HTML 到 JSX 通过 closing void tags, converting 类到 className, 和风格 strings 到 objects.
- 1
JSX differs 从 HTML: 所有 tags 必须是 关闭 (<img /> 而非 <img>), 类 becomes className, 为 becomes htmlFor, 风格是 object 不字符串, 和 inline 事件 handlers use camelCase (onClick 不 onclick). conversion automates 这些 transformations.
- 2 HTML 压缩器 →
压缩 the HTML before conversion to clean up whitespace and ensure consistent structure. This makes the JSX output cleaner and more predictable. Remove comments and unnecessary whitespace.
- 3 JavaScript 格式化器 →
格式化 the resulting JSX for readability. The conversion from HTML to JSX produces valid React components — format to ensure proper indentation and syntax. Verify that all attributes were correctly renamed.
- 4
Manual fixes 之后 conversion: HTML attributes 该是 reserved words (类 → className, 为 → htmlFor), 风格="颜色: red" → 风格={{颜色: "red"}}, 数据-* 和 aria-* attributes stay as-is, SVG attributes use camelCase (stroke-宽度 → strokeWidth). Self-close void tags (<br> → <br />).
常见问题
- 为什么类 成为 className 在 JSX?
- Because JSX compiles 到 JavaScript (React.createElement), 和类 是 reserved 字在 JavaScript (ES6 classes). React 我们 className 到 avoid conflict. Similarly, 为 becomes htmlFor because 为是 reserved 字在 JavaScript.
- 如何 I 转换 inline styles?
- HTML 风格="颜色: red; 字体-大小: 14px" becomes JSX 风格={{颜色: "red", fontSize: "14px"}}. Note: 属性 names 是 camelCase (fontSize 不字体-大小), values 是 strings, 和外 braces 是 JSX 表达式 delimiters while 内 braces 是 object 字面量.