ReactJS:“未捕获的语法错误:意外的令牌" [英] ReactJS: "Uncaught SyntaxError: Unexpected token <"

查看:25
本文介绍了ReactJS:“未捕获的语法错误:意外的令牌"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试开始在 ReactJS 中构建站点.然而,当我尝试将我的 JS 放在一个单独的文件中时,我开始收到这个错误:Uncaught SyntaxError: Unexpected token <".

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

HTML

<头><title>页面</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 src="./lander.js"><身体><div id="内容"></div><script type="text/jsx">反应.render(<着陆器/>,document.getElementById('内容'));

JS

/*** @jsx React.DOM*/var Lander = React.createClass({渲染:函数(){var info = "Lorem ipsum dolor 坐 amet... ";返回(<div><div className="info">{info}</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 转换正常工作,但我不确定它是什么.

哦,我需要使用 MAMP 或其他东西来托管它吗?

解决方案

UPDATE --改用这个:

<小时>

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

然后您可以使用 MAMP 或其他一些服务在本地主机上托管页面,以便所有包含的内容都可以正常工作,如所讨论的 此处.

感谢大家的帮助!

I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: "Uncaught SyntaxError: Unexpected token <".

I tried adding /** @jsx React.DOM */ to the top of the JS file, but it didn't fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong?

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

EDIT: I realized that I need to add type="text/jsx" to the script tag which includes my lander code. However, after adding this and reloading I get this warning

"You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"

followed by this error:

"XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource."

it seems like there is something else that I need to do in order to get in browser jsx transform working, but I'm not sure what it is.

EDIT: OOOOH do I need to host it using MAMP or something?

解决方案

UPDATE -- use this instead:

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


Add type="text/jsx" as an attribute of the script tag used to include the JavaScript file that must be transformed by JSX Transformer, like that:

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

Then you can use MAMP or some other service to host the page on localhost so that all of the inclusions work, as discussed here.

Thanks for all the help everyone!

这篇关于ReactJS:“未捕获的语法错误:意外的令牌"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆