不能直接用Sublime将HTML标签替换为JSX，因JSX要求class→className、for→htmlFor等属性驼峰命名，自闭合标签须写成/，且需Babel插件支持语法高亮与校验，内联样式和事件处理器必须手动改为style={{}}和onClick={() => {}}等格式。

为什么不能直接用 Sublime 的 HTML 标签替换为 JSX？

因为 JSX 不是 HTML，它对标签闭合、属性命名、大括号嵌入、自闭合规则都有严格要求。Sublime 默认没有 JSX 语法校验，盲目替换会产出 React.createElement 运行时报错的代码，比如：class 要写成 className，for 得改成 htmlFor， 直接替换过去会挂掉。

用正则批量处理最稳妥的几个关键点

手动改几十个标签效率低还易漏，推荐在 Sublime 中打开「Find → Replace」，勾选「Regular Expression」，按顺序执行以下替换（注意顺序不能乱）：

• 先改属性名：匹配 class= → 替换为 className=；for= → htmlFor=；tabindex= → tabIndex=（JSX 属性名驼峰）
• 再处理自闭合标签：匹配 ]*> → 替换为 （确保结尾是 /> 而非 >）
• 最后统一闭合风格：把所有 类开始标签后的换行+缩进+对应结束标签，替换成单行或显式闭合结构——JSX 不允许隐式闭合，
  • text
  可以，但
  • text
  会报错

  安装 Babel 插件让 JSX 实时高亮和校验

  光靠替换不够，得让 Sublime 知道你在写 JSX。装完 Package Control 后，安装 Babel 插件（不是官方 React 插件，那个已停更）：

  • 重启 Sublime，打开 .jsx 或 .js 文件，右下角语言模式选 Babel → JavaScript (JSX)
  • 此时 {this.state.x}、onClick={this.handleClick} 会正确高亮，错误如 class="x" 也会被标黄提示
  • 注意：Babel 插件不自动修复，只提示；但它能防止你写出 这种根本过不了 ESLint 的写法

    遇到内联样式和事件处理器要手改，别信全自动工具

    很多所谓“HTML to JSX”在线转换器会把 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-"，得拆成 className={`btn btn-${this.props.type}`}

    const MyComponent = () => (
      
         console.log('clicked')} style={{ backgroundColor: '#007bff' }}>
          Click me
        
      
    );

    真正麻烦的从来不是标签结构，而是那些混在 HTML 里的 PHP/模板变量/内联脚本——它们不会被正则识别，也骗不过任何转换器。留心每一处 {{ 和 ，它们大概率是你接下来要花时间重写的部分。