Question

我对React还是很陌生，我想跟着教程学习，但是在脚本尝试编译时出现以下错误消息：

Parsing error: Unexpected token, expected "}"

它突出显示了LightningCounter类下构造函数行上的'{'花括号。

我不确定为什么要得到这个，因为我复制并粘贴了与编写时完全相同的脚本。

这是我的App.js代码：

<html>

<head>

  <title> Lightning Counter</title>
  <script src="https://unpkg.com/react@16.9.0/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@16.9.0/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"> 
</script>
</head>

<body>

<div id="container"></div>

<script type="text/babel">


class LightningCounter extends React.Component {
 constructor(props, context) {
   super(props, context);

  this.state = {
  strikes: 0
};

this.timerTick = this.timerTick.bind(this);
}

timerTick() {
  this.setState({
   strikes: this.state.strikes + 100
});
}

componentDidMount() {
  setInterval(this.timerTick, 1000);
}

render() {
  var counterStyle = {
  color: "#66FFFF",
  fontSize: 50
};

var count = this.state.strikes.toLocaleString();

return (
  <h1 style={counterStyle}>{count}</h1>
);
}
}

class LightningCounterDisplay extends React.Component {
  render() {
   var commonStyle = {
    margin: 0,
    padding: 0
  };

var divStyle = {
  width: 250,
  textAlign: "center",
  backgroundColor: "#020202",
  padding: 40,
  fontFamily: "sans-serif",
  color: "#999999",
  borderRadius: 10
};

var textStyles = {
  emphasis: {
    fontSize: 38,
    ...commonStyle
  },
  smallEmphasis: {
    ...commonStyle
  },
  small: {
    fontSize: 17,
    opacity: 0.5,
    ...commonStyle
  }
};

return (
  <div style={divStyle}>
    <LightningCounter />
    <h2 style={textStyles.smallEmphasis}>LIGHTNING STRIKES</h2>
    <h2 style={textStyles.emphasis}>WORLDWIDE</h2>
    <p style={textStyles.small}>(since you loaded this example)</p>
  </div>
 );
}
}

ReactDOM.render(
<LightningCounterDisplay />,
document.querySelector("#container")
);



</script>

</body>

</html>

这是我的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import LightningCounterDisplay from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<LightningCounterDisplay />, document.getElementById('root'));

serviceWorker.unregister();

任何帮助将不胜感激！

Answer 1

更新您的CDN链接：

https://reactjs.org/docs/cdn-links.html

https://cdnjs.com/libraries/babel-core

似乎找不到当前文件。

解析错误：意外令牌，React中应为“}”

1 个答案: