不能直接用sublime将html标签替换为jsx，因jsx要求class→classname、for→htmlfor等属性驼峰命名，自闭合标签须写成/，且需babel插件支持语法高亮与校验，内联样式和事件处理器必须手动改为style={{}}和onclick={() => {}}等格式。
为什么不能直接用 Sublime 的 HTML 标签替换为 JSX？
因为 JSX 不是 HTML，它对标签闭合、属性命名、大括号嵌入、自闭合规则都有严格要求。Sublime 默认没有 JSX 语法校验，盲目替换会产出 React.createElement 运行时报错的代码，比如：class 要写成 className，for 得改成 htmlFor，<div class="x"></div> 直接替换过去会挂掉。
用正则批量处理最稳妥的几个关键点
手动改几十个标签效率低还易漏，推荐在 Sublime 中打开「Find → Replace」，勾选「Regular Expression」，按顺序执行以下替换（注意顺序不能乱）：
-
先改属性名：匹配
class=→ 替换为className=；for=→htmlFor=；tabindex=→tabIndex=（JSX 属性名驼峰） -
再处理自闭合标签：匹配
]*>→ 替换为（确保结尾是/>而非>） -
最后统一闭合风格：把所有
<div> 类开始标签后的换行+缩进+对应结束标签，替换成单行或显式闭合结构——JSX 不允许隐式闭合，<code><ul><li>text</li></ul>可以，但<ul><li>text</li></ul>会报错安装 Babel 插件让 JSX 实时高亮和校验
光靠替换不够，得让 Sublime 知道你在写 JSX。装完
Package Control后，安装Babel插件（不是官方React插件，那个已停更）：- 重启 Sublime，打开 .jsx 或 .js 文件，右下角语言模式选
Babel → JavaScript (JSX) - 此时
{this.state.x}、onClick={this.handleClick}会正确高亮，错误如class="x"也会被标黄提示 - 注意：Babel 插件不自动修复，只提示；但它能防止你写出
<div onclick="..."> 这种根本过不了 ESLint 的写法 <h3>遇到内联样式和事件<a style="color:#f60; text-decoration:underline;" title="处理器" href="https://www.php.cn/zt/16030.html" target="_blank">处理器</a>要手改，别信全自动<a style="color:#f60; text-decoration:underline;" title="工具" href="https://www.php.cn/zt/16887.html" target="_blank">工具</a> </h3> <p>很多所谓“HTML to JSX”在线转换器会把 <code>style="color:red;"错误转成字符串而非对象，或者把onclick="doIt()"留在原地。这些必须人工干预：立即学习“前端免费学习笔记（深入）”；
-
style="margin: 0; font-size: 14px;"→ 改为style={{ margin: '0', fontSize: '14px' }}（双大括号，key 驼峰，值加引号） -
onclick="alert(1)"→ 改为onClick={() => alert(1)}或onClick={this.handleClick}（首字母大写 + 函数引用或箭头函数） - 含 JS 表达式的属性，比如
class="btn btn-<?php echo $type;?>"，得拆成className={`btn btn-${this.props.type}`}
const MyComponent = () => ( <div className="container"> <button onClick={() => console.log('clicked')} style={{ backgroundColor: '#007bff' }}> Click me </button> </div> );真正麻烦的从来不是标签结构，而是那些混在 HTML 里的 PHP/模板变量/内联脚本——它们不会被正则识别，也骗不过任何转换器。留心每一处
{{和，它们大概率是你接下来要花时间重写的部分。 -
- 重启 Sublime，打开 .jsx 或 .js 文件，右下角语言模式选
