运行React Login组件报Unexpected token错误，代码及报错详情如下

安全阿岳

2026-9-29

问题原因

你遇到的语法报错是代码中使用的<>（React Fragment短语法）不被当前项目的编译环境支持导致的：

该短语法仅在React v16.2及更高版本，且配套的Babel编译配置支持该特性时才能正常解析
你的项目要么React版本低于v16.2，要么Babel未开启短Fragment的编译支持，因此解析到<>时识别为非法字符，抛出Unexpected token错误

修复方案

方案一：替换为Fragment完整写法（零配置，推荐优先使用）

将代码中所有的<>替换为<React.Fragment>，对应的闭合标签</>替换为</React.Fragment>即可，修改后的三目运算部分代码如下：

{hasAccount ? (
     <React.Fragment>
        <button onClick={handleLogin}> Sign in </button>
        <p>
            Don't have an account ?
            <span onClick={() => setHasAccount(!hasAccount)}>Sign up</span>
        </p>
    </React.Fragment>
    
) : (
    <React.Fragment>
        <button onClick={handleLogin}> Sign up </button>
        <p>
            Has an account ?
            <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
        </p>
    </React.Fragment>
)}

方案二：升级依赖+配置Babel支持短语法（适合需要保留短语法的场景）

首先升级React相关依赖到16.2及以上版本，执行命令：
npm install react@latest react-dom@latest
如果你的项目使用的Babel版本低于7，需要额外安装@babel/plugin-transform-react-jsx插件，并在Babel配置文件的plugins数组中添加该插件配置，开启短Fragment的编译支持。