React中使用<>包裹多组件返回时出现Syntax Error问题

可能原因 #

• React/Babel版本不兼容：Fragment简写语法是React 16.2及以上版本才支持的特性。如果本地项目的React版本低于16.2，或者Babel没有配置对应的解析插件，就会触发语法错误。CodeSandbox默认使用较新的React环境，所以能正常运行。
• Babel配置缺失：即使React版本达标，若Babel未安装@babel/preset-react预设，或配置文件未启用该预设，也无法正确解析Fragment简写语法。
• 项目依赖环境异常：部分自定义配置的React项目，可能存在依赖冲突或配置遗漏，导致编译工具无法识别该语法。

解决办法 #

1. 升级React版本
   在项目根目录执行命令，升级React和React-DOM到最新稳定版：

   npm install react@latest react-dom@latest
   # 或使用yarn
   yarn add react@latest react-dom@latest
   

2. 配置Babel解析规则

   • 安装必要的Babel预设：

     npm install --save-dev @babel/preset-react
     

   • 在项目根目录的.babelrc或babel.config.js中添加配置：

     {
       "presets": ["@babel/preset-react"]
     }
     

     注：如果是Create React App创建的项目，默认已配置好该预设，无需额外操作。

3. 临时替换为完整Fragment语法
   如果暂时无法升级或修改配置，可以用完整的<React.Fragment>代替简写语法，需先导入React：

   import React from 'react';
   
   export default function Board() {
     // ... 其他代码
   
     return (
       <React.Fragment>
         {/* 原有组件内容 */}
       </React.Fragment>
     );
   }
   

4. 检查VSCode插件状态
   确保VSCode中的ESLint、React相关插件已更新到最新版本，避免编辑器语法检查误报。

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