React 16.2中使用Fragment出现Unexpected token错误求助

嘿，这个问题我帮好多开发者排查过——Fragment确实是React 16.2+用来替代冗余div容器的好东西，但报错十有八九是写法不对或者环境没跟上，咱们一个个拆解：

1. 最常见：Fragment语法用错了 #

React 16.2提供了两种Fragment写法，但各自有使用限制：

• 短语法<>：简洁，但不能加key属性，而且需要你的编译工具（比如Babel）支持这个JSX扩展语法。如果你的Babel版本太旧，或者没配置@babel/plugin-transform-react-jsx（或对应的preset），就会触发Unexpected token错误。
  正确示例：

  return (
    <>
      <UserAvatar />
      <UserInfo />
    </>
  );
  

• 完整语法<React.Fragment>：可以加key（比如列表循环渲染时必须用这个），但前提是你得在文件顶部导入React：

  import React from 'react'; // 必须有这行！
  
  return items.map(item => (
    <React.Fragment key={item.id}>
      <span>{item.title}</span>
      <span>{item.content}</span>
    </React.Fragment>
  ));
  

  要是漏了导入React，或者把React.Fragment写错（比如写成Fragment却没单独导入），都会导致语法解析失败。

2. 环境依赖版本不兼容 #

就算你升级了React到16.2，要是配套的工具版本没跟上也会出问题：

• Babel的@babel/preset-react需要更新到支持React 16.2的版本；
• ESLint的规则如果太旧，可能会把Fragment语法识别为错误；
• 如果你用的是Create React App，得确保CRA的版本支持React 16.2的Fragment语法（旧版CRA可能需要升级）。

3. 编辑器缓存坑 #

有时候编辑器的语法解析缓存没同步更新，明明代码是对的，但编辑器还是标红报错。这种情况试试重启编辑器，或者清除编辑器的缓存文件，一般就能解决。

快速排查步骤 #

1. 先检查Fragment的写法：用短语法的话确认Babel支持，用完整语法的话确认导入了React；
2. 验证React和配套工具（Babel、CRA等）的版本是否兼容；
3. 重启编辑器排除缓存问题。

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