当前位置: 首页 > 面试题库 >

ReactJS:“未捕获的SyntaxError:意外的令牌<”

金高飞
2023-03-14
问题内容

我正在尝试开始在ReactJS中构建网站。但是,当我尝试将JS放在单独的文件中时,我开始收到此错误:“ Uncaught
SyntaxError:Unexpected token <”。

我尝试添加/** @jsx React.DOM */到JS文件的顶部,但没有解决任何问题。以下是HTML和JS文件。关于出什么问题有什么想法吗?

的HTML

<html>
  <head>
    <title>Page</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
    <script src="./lander.js"> </script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        React.render(
            <Lander />,
            document.getElementById('content')
        );
    </script>
  </body>
</html>

JS

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

编辑:我意识到我需要添加type="text/jsx"到包括我的着陆器代码的脚本标签。但是,添加并重新加载后,我得到此警告

“您正在使用的浏览器JSX变压器一定要预编译JSX生产- http://facebook.github.io/react/docs/tooling-
integration.html#jsx

随后出现此错误:


XMLHttpRequest无法加载file:///Users/…/lander.js。跨源请求仅支持以下协议方案:http,data,chrome-
extension,https,chrome-extension-resource。”

为了使浏览器jsx转换正常工作,似乎还需要做其他事情,但是我不确定这是什么。

编辑:OOOOH我是否需要使用MAMP托管它?


问题答案:

更新-使用此代替:

<script type="text/babel" src="./lander.js"></script>

添加type="text/jsx"script标签的属性,该标签用于包含必须由JSX
Transformer转换的JavaScript文件,如下所示:

<script type="text/jsx" src="./lander.js"></script>

然后你可以使用甲基苯丙胺或一些其他服务托管的网页在本地主机上,这样所有的包裹的工作,为讨论在这里。

谢谢各位的帮助!



 类似资料:
  • 问题内容: 我正在尝试开始在ReactJS中构建网站。但是,当我尝试将JS放在单独的文件中时,我开始收到此错误:“ Uncaught SyntaxError:Unexpected token <”。 我尝试添加到JS文件的顶部,但没有解决任何问题。以下是HTML和JS文件。关于出什么问题有什么想法吗? HTML JS 编辑:我意识到我需要添加到包括我的着陆器代码的脚本标签。但是,添加并重新加载后,

  • 问题内容: 我在MooTools脚本中运行AJAX调用,在Firefox中运行正常,但是在Chrome中出现错误,我无法确定原因。注释掉代码以确定错误代码在什么地方不会产生任何结果,我认为这可能与返回JSON有关。在控制台中检查,我看到返回的JSON是这样的: 我没有看到任何问题,为什么会发生此错误? 问题答案: 我刚刚解决了这个问题。导致标准Request调用出现问题的原因是,这是我改用的代码:

  • 问题内容: 我从网络服务返回的JSON遇到问题。看起来JSON缺少引号,但是当我在JSON中添加引号时,出现错误。这是错误消息:’Uncaught SyntaxError:意外的标记o。当我将字符串记录到控制台时:[对象对象],[对象对象] 这是一些模拟错误的示例代码: 这是相同的代码,在字符串两边用单引号引起来。有用 但是,当我尝试在字符串中添加引号时,就像我在实际代码中似乎需要的那样,它失败了

  • 问题内容: 是什么导致第三行出现此错误? 打开控制台以查看错误 问题答案: 是一个对象。(从对象文字创建) 用于将包含JSON表示法的 字符串 转换为Javascript对象。 您的代码将对象转换为字符串(通过调用),以尝试将其解析为JSON文本。 默认返回,这是无效的JSON;因此错误。

  • 问题内容: 尝试传递以下字符串时出现语法错误: 我知道当我使用双引号时,错误来自链接。 如果我使用单引号,则没有问题,但是数据是从服务器端获取的,我无法控制要传入的内容,因此只能在我这一边进行控制。 到目前为止,我从互联网上阅读的内容尝试了以下操作: 先使用,然后再使用。我可以解析没有问题,但是当我尝试循环数据时会出现问题。循环不是将其作为JSON循环,而是将数据作为字符串并循环每个单个文本。 转

  • 问题内容: 我是Web服务的新手。在我的项目中,当我尝试运行时,我连接了Web Service(一切就绪),现在出现以下错误。 错误-> Web服务和我的页面在相同的解决方案中,但项目不同。 相关代码如下: jQuery (URL:11761) 网络服务 (URL:12015) 在这里问之前,我已经通过了此链接(无法理解) 问题答案: 弄清了您违反了相同来源策略的原因,因为站点和Web服务正在两个