Ошибка синтаксического анализа: неожиданный токен, ожидается "}" в React - PullRequest
Новая
       8

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

0 голосов
/ 17 октября 2019

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

Parsing error: Unexpected token, expected "}"

Выделено фигурное '{'фигурная скобка в строке конструктора под классом LightningCounter.

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

Вот мое приложение. 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();

Любая помощь будет безмерно признательна!

1 Ответ

0 голосов
/ 17 октября 2019

Обновите ваши ссылки CDN:

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

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

Кажется, что текущие файлы не могут быть найдены.

...