ReactJS：“未捕获的语法错误：意外的标记 <”

IT技术 javascript html reactjs react-jsx
2021-03-11 06:25:17

我正在尝试开始在 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 转换正常工作，但我不确定它是什么。

编辑：哦，我需要使用 MAMP 或其他东西来托管它吗？

6个回答

更新——改用这个：

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

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

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

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

谢谢各位的帮助！

完美运行，我只是添加了text/jsx属性值
2021-04-19 06:25:17
随着对 的更新type="text/babel"，在开发模式下使用此脚本转换 JSX：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2021-04-23 06:25:17
python -m SimpleHTTPServer 8080 之所以常用，是因为您不必安装、运行和配置像 apache 这样的持久服务器。
2021-05-09 06:25:17

JSTransform 已弃用，请改用 babel。

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

添加type="text/babel"为脚本标记的属性，如下所示：

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

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

对于6版本：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>提到就在这里
2021-05-09 06:25:17

如果你有类似的东西

Uncaught SyntaxError: embedded: Unexpected token

你可能在这样的地方漏掉了一个逗号：

  var CommentForm = React.createClass({
  getInitialState: function() {
      return {author: '', text: ''};

  }, // <---- DON'T FORGET THE COMMA

  render: function() {
      return (
      <form className="commentForm">
          <input type="text" placeholder="Nombre" />
          <input type="text" placeholder="Qué opina" />
          <input type="submit" value="Publicar" />
      </form>
      )
  }
  });
即时解决方案。）
2021-04-23 06:25:17
其它你可能感兴趣的问题
上一篇在javascript中删除字符串内的空格 下一篇性能 - Date.now() 与 Date.getTime()