相关疑难解决方法(0)

有问题的项目是使用React-16.2.0,它有能力使用Fragments和Fragment简写.

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

虽然全长语法工作正常...

import React, { Fragment, Component } from 'react';

class TestingFragment extends Component {
    render() {
        return (
            <Fragment>
                <span>This is a fragment of text </span>
                <div>Another part of the fragment</div>
            </Fragment>
        )
    }
};

export default TestingFragment

速记无法编译,我不知道为什么会这样.例子......

import React, { Component } from 'react';

class TestingFragment extends Component {
    render() {
        return (
            <>
                <span>This is a fragment of text </span>
                <div>Another part of the fragment</div>
            </>
        )
    }
};

export default TestingFragment

哪个编译失败如下......

Failed to …

我正在尝试在本地环境中遵循有关 React 的 Tic-Tac-Toe 教程。但是，当我运行时npm start，我遇到了语法错误<>。

如何重现

1. 在教程中间的“此时您的代码应如下所示：”下，单击示例代码右上角的“分叉”，并在表格中写入 1 到 9 的数字。
2. 单击代码沙盒左上角的按钮，导航到“文件”，然后导出到 Zip，并将代码示例下载为 Zip 文件。
3. 解压下载的Zip文件，并在项目根目录下依次执行npm install和。npm start
4. 显示以下错误消息。

./src/App.js
Syntax error: Unexpected token (3:5)

  1 | export default function Board() {
  2 |   return (
> 3 |     <>
    |      ^
  4 |       <div className="board-row">
  5 |         <button className="square">1</button>
  6 |         <button className="square">2</button>

问题

我该如何解决这个错误？尽管我可以在线继续该教程，但我更愿意在本地环境中继续该教程，在那里我可以获得 lsp、格式化程序等的帮助。

版本信息

Node.js：v18.12.1

npm：8.19.2

npm view react version在项目根目录上：18.2.0