Javascript реагирует на необработанную ошибку синтаксиса: неожиданный токен '<' или ошибка синтаксиса - PullRequest
Новая
       7

Javascript реагирует на необработанную ошибку синтаксиса: неожиданный токен '<' или ошибка синтаксиса

1 голос
/ 13 марта 2020

Я начинаю с React и выполняю упражнение из класса edX (не для сертификации, а для развлечения). Код должен загружать кнопки из класса реакции на страницу html.

Редактировать : В других примерах код выполнялся успешно, поэтому я не смотрю напрямую на изменение настроек конфигурации

В моем скрипте есть ошибка, которая предотвращает. js файл для загрузки правильно, и я не могу понять, откуда он.

Я использую VSCode 1.42.1 и отлаживаю на Chrome 76.0. В VSCode нет ошибок вывода. При загрузке в Chrome я получаю сообщение об ошибке

Uncaught SyntaxError: неожиданный токен '<' </p>

Я пытался проверить синтаксис, но не смог ' отследить ошибку. Что я пробовал: - проверить синтаксис функции рендеринга и возврата - проверить сообщение об ошибке - заново создать сценарий для исключения ошибок программирования - проверил ссылки на сценарии

Я мог бы использовать некоторую помощь в поиске ошибки или быть указал в правильном направлении.

Html файл: fontchoosertest. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="Fontchoose_container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   <div>
    Here goes...
     <!--Programmed scripts-->
      <script src="./FontChooser.js" type="text/javascript"></script> 
    ....done
</div>
</body>
</html>

Javascript / React-файл: FontChooser. js 

class FontChooser extends React.Component {
    constructor(props) {
    super(props);

    this.state = {hideElement:true}
    this.text="Click on this part"
    this.size=10
    }

    render() {
    return(<div>
           <input type="checkbox" id="boldCheckbox" hidden={false}/>
           <button id="decreaseButton" hidden={false}>-</button>
           <span id="fontSizeSpan" hidden={false}>{this.props.size}</span>
           <button id="increaseButton" hidden={false}>+</button>
           <span id="textSpan" >{this.props.text}</span>
           </div>
    );
    }
}

'' '

1 Ответ

1 голос
/ 13 марта 2020

Эта ошибка, потому что браузер не может прочитать JSX, который вернулся из вашего метода render, поэтому он будет выдавать ошибку всякий раз, когда он видит первый открывающий тег JSX <

Чтобы использовать JSX, вам понадобится транспортер, такой как babel js

Во-первых, обратите внимание, что JSX это совершенно необязательно , и вы все еще можно использовать React без него. Проверьте здесь для получения дополнительной информации.

Пожалуйста, следуйте этой структуре: 

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <!-- React container -->
    <div id="Fontchoose_container"></div>

    Here goes...
    <!--Programmed scripts-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- DON'T use babel in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- You can use JSX in any <script> tag by adding type="text/babel" attribute to it. -->
    <script type="text/babel" src="./FontChooser.js"></script>
    ....done
  </body>
</html>

В вашем FontChooser. js

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    //...
  }

  render() {
    return(
       {/* JSX here */}
     );
  }
}
// Add this
ReactDOM.render( <FontChooser />, document.getElementById('Fontchoose_container'))

Наконец , вам нужно открыть эту страницу с сервером, например VS Code LiveServer

Важное примечание:

Этот подход хорош для обучения и создания простых демонстраций. Тем не менее, это делает ваш сайт медленным и не подходит для производства. Когда вы будете готовы двигаться вперед, удалите этот новый тег и атрибуты type = "text / babel", которые вы добавили. Вместо этого в следующем разделе вы настроите препроцессор JSX для автоматического преобразования всех ваших тегов. Документы

Другими словами, так же, как упомянуто @ Kornflexx , просто используйте create-Reaction-app :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...