Ошибка синтаксического анализа: неожиданный токен, ожидается «}» в React

Ошибка синтаксического анализа: неожиданный токен, ожидается «}» в React

Я довольно новичок в React и пытаюсь следовать учебнику, однако при попытке компиляции скрипта появляется следующее сообщение об ошибке:

 Parsing error: Unexpected token, expected "}" 

Он выделяет фигурную скобку «{» в строке конструктора под классом LightningCounter.

Я не уверен, почему я получаю это, потому что я копирую и вставляю сценарий точно так, как он был написан.

Вот мой код App.js:

 {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt; Lightning Counter{amp}lt;/title{amp}gt; {amp}lt;script src="https://unpkg.com/react@16.9.0/dist/react.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://unpkg.com/react-dom@16.9.0/dist/react-dom.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="container"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script type="text/babel"{amp}gt; 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 ( {amp}lt;h1 style={counterStyle}{amp}gt;{count}{amp}lt;/h1{amp}gt; ); } } 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 ( {amp}lt;div style={divStyle}{amp}gt; {amp}lt;LightningCounter /{amp}gt; {amp}lt;h2 style={textStyles.smallEmphasis}{amp}gt;LIGHTNING STRIKES{amp}lt;/h2{amp}gt; {amp}lt;h2 style={textStyles.emphasis}{amp}gt;WORLDWIDE{amp}lt;/h2{amp}gt; {amp}lt;p style={textStyles.small}{amp}gt;(since you loaded this example){amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; ); } } ReactDOM.render( {amp}lt;LightningCounterDisplay /{amp}gt;, document.querySelector("#container") ); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

И вот мой файл index.js:

 import React from 'react'; import ReactDOM from 'react-dom'; import LightningCounterDisplay from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render({amp}lt;LightningCounterDisplay /{amp}gt;, document.getElementById('root')); serviceWorker.unregister(); 

Любая помощь будет очень ценится!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector