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

JavaScript

逆天樱

2020-03-12

我正在尝试开始在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 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?

第1040篇《ReactJS:“未捕获到的SyntaxError:意外令牌<”》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
Tony伽罗Sam 2020.03.12

如果遇到这样的错误:

语法错误:嵌入:意外令牌(107:9)105

可能是您缺少大括号

前端飞云 2020.03.12

您输入的代码正确无误。JSX代码需要编译为JS:

http://facebook.github.io/react/jsx-compiler.html

Itachi 2020.03.12

添加type="text/babel"为脚本标签的属性,如下所示:

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

JSTransform已弃用,请改用babel。

<script type="text/babel" src="./lander.js"></script>
JinJin宝儿 2020.03.12

更新-使用此代替:

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

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

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

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

谢谢各位的帮助!

米亚番长 2020.03.12

添加type="text/babel"到包含.jsx文件的脚本并添加以下内容: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android