本地运行React井字棋教程代码遇<>语法错误如何解决？

数据老陈

2026-8-1

React井字棋代码本地运行语法错误解决方案

问题描述

我跟随React官方井字棋教程学习，将教程示例代码从CodeSandbox导出到本地后，执行npm start时出现语法错误，提示<>处存在Unexpected token。

复现步骤

在教程的「此时你的代码应大致如下」环节，点击含1-9数字表格示例代码右上角的Fork按钮；
点击CodeSandbox左上角按钮，依次进入File→Export to Zip，下载代码压缩包；
解压压缩包后，在项目根目录依次执行npm install和npm start；
出现如下错误信息：

./src/App.js
Syntax error: Unexpected token (3:5)
1 | export default function Board() {
2 | return (
3 | <>
| ^
4 |

5 |
6 |

版本信息

Node.js: v18.12.1
npm: 8.19.2
项目根目录执行npm view react version结果：18.2.0

解决方案

这个错误是因为本地构建工具不支持React的Fragment短语法（<>），有两种解决方法：

方法1：替换短语法为完整Fragment语法

把代码里的<>替换为<React.Fragment>，并确保在文件顶部导入React：

import React from 'react';

export default function Board() {
  return (
    <React.Fragment>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        {/* 剩余代码保持不变 */}
      </div>
    </React.Fragment>
  );
}