ASP.NET集成React时HTML插入报错：Uncaught SyntaxError: Unexpected token <

DevOps 小满

2026-5-29

为什么会遇到Uncaught SyntaxError: Unexpected token <错误？

这个错误的根源非常清晰——你在.js后缀的文件里写了JSX语法，但浏览器无法直接解析JSX。它会把<div className="App text-center">里的<当成普通JavaScript的语法符号，自然就抛出了“意外的token”错误。下面具体拆解问题和解决办法：

核心问题分析

JSX需要转译，浏览器原生不支持
JSX是React的语法糖，本质上会被转译成React.createElement()这类浏览器能识别的原生JavaScript调用。你引入的react.js和react-dom.js是运行时库，不负责转译JSX，必须依赖转译工具（比如Babel、React.NET自带的转译）把JSX转换成原生JS。
文件后缀与转译规则不匹配
通常转译工具（包括你用的React.NET）只会自动识别.jsx后缀的文件并处理JSX语法，而你的App.js是.js后缀，转译流程会跳过它，导致浏览器直接读取未转译的JSX代码。
遗漏组件导出语句
你的App.js里没有export default App;，就算解决了JSX问题，index.jsx也无法正确导入这个组件，这是另一个潜在的运行错误。

具体解决方案

方案一：适配React.NET的转译流程（推荐）

这是最贴合你现有教程环境的做法：

把App.js重命名为App.jsx，然后在index.jsx里更新导入路径：

import App from './src/App.jsx'; 
ReactDOM.render( 
  <App />, 
  document.getElementById('content') 
);

在App.jsx末尾添加导出语句：

import React, { Component } from 'react'; 
class App extends Component { 
  render() { 
    return ( 
      <div className="App text-center"> 
        <h1>Analytics</h1> 
      </div> 
    ); 
  } 
}
export default App; // 必须添加这行

确认你的ASP.NET项目已经正确配置React.NET：检查Web.config里是否启用了React.NET的视图引擎，确保.jsx文件会被自动转译后输出到浏览器。

方案二：手动替换JSX为原生React API（无需转译）

如果不想依赖转译工具，可以把JSX语法手动转换成React.createElement调用：

import React, { Component } from 'react'; 
class App extends Component { 
  render() { 
    return React.createElement(
      'div', 
      { className: 'App text-center' },
      React.createElement('h1', null, 'Analytics')
    ); 
  } 
}
export default App;

这种写法浏览器可以直接解析，但代码可读性会差很多，适合简单组件测试。

方案三：临时用CDN转译（仅用于快速测试）

如果只是想快速验证代码，可以引入Babel的CDN来实时转译JSX，但绝对不推荐用于生产环境：
在Index.cshtml的脚本列表里添加Babel：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

然后把你的JSX代码放在type="text/babel"的脚本标签里，或者调整模块加载的类型，但这种方式在模块场景下兼容性有限，仅做临时测试用。

内容的提问来源于stack exchange，提问作者Blake Steel