HTML转React组件怎么实现？

HTML直接复制粘贴进React会报错，因为JSX虽看似HTML，实则是JavaScript语法糖，必须将class改为className、for改为htmlFor、自闭合标签显式闭合、内联样式写成对象、注释改用{/* */}；原HTML中的DOM操作、事件绑定和循环渲染需重构为React状态（useState/useEffect）、事件处理器和map+唯一key；静态资源路径要遵循模块系统规则，图片CSS需import引入，public资源用绝对路径；表单务必采用受控组件模式，让state驱动输入值并同步更新。本质不是“套壳转换”，而是以数据流为中心，重建状态与UI的映射关系。

直接把 HTML 拷进 JSX 会报错，因为语法不兼容

HTML 里的 class、for、自闭合标签写法、内联样式写法，在 JSX 里全得改。不是“复制粘贴就能用”，而是“看着像 HTML，实则是 JS 对象的语法糖”。

• class → 必须写成 className（React 保留字冲突）
• for（如 ）→ 改成 htmlFor
• <input>、 等自闭合标签，JSX 要求显式闭合：<input />，不能写 <input>
• 内联样式必须是对象：style={{ color: 'red', fontSize: '14px' }}，不是字符串
• 注释写法从 变成 {/* 注释 */}

静态页面里有 JS 逻辑？别硬塞 script 标签

原 HTML 中的