个人中心
gpt4 book ai didi

javascript - Javascript响应 Uncaught SyntaxError : Unexpected token '<' or Syntax error

转载 作者：行者123 更新时间：2023-12-03 08:07:40 24 4
gpt4 key购买 nike

我从React开始，我正在从edX类做练习(不是为了认证而是为了娱乐)。该代码应该将按钮从react类加载到html页面。

编辑:在其他示例中，代码成功执行，因此我不会直接考虑更改配置设置

我的脚本中有一个错误，阻止.js文件正确加载，我无法确定它的来源。

我正在使用VSCode 1.42.1，并在Chrome 76.0上进行调试。在VSCode中，没有错误输出。在Chrome中实时加载时，出现错误消息

Uncaught SyntaxError: Unexpected token '<'



我试图验证语法，但无法追踪错误。我试过的
-检查render和return函数的语法
-检查错误消息
-重新创建脚本以排除编程错误
-检查脚本引用

我可以使用一些帮助来查找错误或将其指向正确的方向。

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>
    );
    }
}

'''

最佳答案

发生此错误是因为浏览器无法读取从JSX方法返回的render，因此只要看到第一个打开的JSX 标记 <的浏览器，就会抛出错误

为了使用JSX，您需要像babeljs这样的编译器

首先请注意JSX是completely optional，没有它您仍然可以使用React。检查here了解更多信息。

请遵循以下结构:

<!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

重要说明:

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically. Docs



换句话说，就像 @Kornflexx 所提到的，只需使用 create-react-app :)

关于javascript - Javascript响应 Uncaught SyntaxError : Unexpected token '<' or Syntax error，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60668141/

24 4 0
文章推荐： node.js - 表达错误处理或域？
文章推荐： hyperlink - 为什么我们网站的链接今天在 IE 中停止工作？
文章推荐： powershell - powershell:如何评估从文件读取的字符串
文章推荐： excel - 使用VBA将Excel工作簿导出为PDF
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com