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

小编典典

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

html

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

/**
 * @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生产- ”

随后出现此错误：

“ XMLHttpRequest无法加载file：///Users/…/lander.js。仅协议方案支持跨源请求：http，数据，chrome-
extension，https，chrome-extension-resource。”

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

编辑：OOOOH我需要使用MAMP或其他东西托管吗？

阅读 427

2020-05-10

共1个答案

小编典典

更新-使用此代替：

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

添加type="text/jsx"为script标签的属性，该标签用于包含必须由JSXTransformer转换的JavaScript文件，如下所示：

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

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

谢谢各位的帮助！

2020-05-10