我的问题是前几天它渲染得很好。我检查了一个 devCopy 以继续我离开的地方，只安装了 npm 包，没有更改任何代码。我希望看到它渲染得很好，没有问题，但是错误消息：语法错误 - 意外令牌。
99 |
100 | return (
> 101 | <>
| ^
102 | {/* Link to scoreboard */}
103 | <Link to="/" className="board-link">Return to Scoreboard?</Link>
104 |
我已经尝试将其设置为 div 标签。这并没有解决错误，只是使情况变得更糟。
我在 VS 代码编辑器中没有看到任何错误，这是运行后显示的消息：yarn start storybook
我正在尝试使用故事书来测试 React 组件。
我看到这不再那么好了，但是我在这里看到的问题与此无关，因为它可以很好地渲染代码。
同样，没有更改任何代码...
为什么会这样？我能做些什么来解决这个问题，为什么有一天会这样，然后第二天就不行了？
我不希望任何人回答我的所有问题，但如果有人可以提供帮助，我只想让它工作，即使我必须更改代码。
这是有问题的文件：board.jsx
* src/components/board.jsx
*/
import React from 'react'
import { Link } from 'react-router-dom'
// Import Storage object
import { Storage } from './../storage/storage'
// Import Box component
import { Box } from './board-box'
// Import utility functions
import * as utils from '../utils/functions'
// Create Board component
export class Board extends React.Component {
constructor(props) {
super(props)
// Initialize component state
this.state = {
boxes: Array(9).fill(null),
history: [],
xIsNext: true
}
}
// Create instance of Storage object
storage = new Storage()
// Handle click on boxes on the board.
handleBoxClick(index) {
// get current state of boxes
const boxes = this.state.boxes.slice()
// Get current state of history
let history = this.state.history
// Stop the game if board contains winning combination
if (utils.findWinner(boxes) || boxes[index]) {
return
}
// Stop the game if all boxes are clicked (filled)
if(utils.areAllBoxesClicked(boxes) === true) {
return
}
// Mark the box either as 'x' or 'o'
boxes[index] = this.state.xIsNext ? 'x' : 'o'
// Add move to game history
history.push(this.state.xIsNext ? 'x' : 'o')
// Update component state with new data
this.setState({
boxes: boxes,
history: history,
xIsNext: !this.state.xIsNext
})
}
// Handle board restart - set component state to initial state
handleBoardRestart = () => {
this.setState({
boxes: Array(9).fill(null),
history: [],
xIsNext: true
})
}
render() {
// Get winner (if there is any)
const winner = utils.findWinner(this.state.boxes)
// Are all boxes checked?
const isFilled = utils.areAllBoxesClicked(this.state.boxes)
// Status message
let status
if (winner) {
// If winner exists, create status message
status = `The winner is: ${winner}!`
// Push data about the game to storage
this.storage.update([`${winner} won`])
} else if(!winner && isFilled) {
// If game is drawn, create status message
status = 'Game drawn!'
// Push data about the game to storage
this.storage.update(['Game drawn'])
} else {
// If there is no winner and game is not drawn, ask the next player to make a move
status = `It is ${(this.state.xIsNext ? 'x' : 'o')}'s turn.`
}
return (
<>
{/* Link to scoreboard */}
<Link to="/" className="board-link">Return to Scoreboard?</Link>
{/* The game board */}
<div className="board-wrapper">
<div className="board">
<h2 className="board-heading">{status}</h2>
<div className="board-row">
<Box value={this.state.boxes[0]} onClick={() => this.handleBoxClick(0)} />
<Box value={this.state.boxes[1]} onClick={() => this.handleBoxClick(1)} />
<Box value={this.state.boxes[2]} onClick={() => this.handleBoxClick(2)} />
</div>
<div className="board-row">
<Box value={this.state.boxes[3]} onClick={() => this.handleBoxClick(3)} />
<Box value={this.state.boxes[4]} onClick={() => this.handleBoxClick(4)} />
<Box value={this.state.boxes[5]} onClick={() => this.handleBoxClick(5)} />
</div>
<div className="board-row">
<Box value={this.state.boxes[6]} onClick={() => this.handleBoxClick(6)} />
<Box value={this.state.boxes[7]} onClick={() => this.handleBoxClick(7)} />
<Box value={this.state.boxes[8]} onClick={() => this.handleBoxClick(8)} />
</div>
</div>
<div className="board-history">
<h2 className="board-heading">Moves:</h2>
{/* List with history of moves */}
<ul className="board-historyList">
{this.state.history.length === 0 && <span>We're waiting...</span>}
{this.state.history.length !== 0 && this.state.history.map((move, index) => {
return <li key={index}>Move {index + 1}: <strong>{move}</strong></li>
})}
</ul>
</div>
{/* Button to start new game */}
{winner && <div className="board-footer">
<button className="btn" onClick={this.handleBoardRestart}>New Game?</button>
</div>}
</div>
</>
)
}
}