ReactJS：“Uncaught SyntaxError：Unexpected token <”-Java 学习之路

我正在尝试开始在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以进行生产环境 - http://facebook.github.io/react/docs/tooling-integration.html#jsx”

然后是这个错误：

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

为了让浏览器jsx转换工作，我似乎还需要做一些事情，但我不确定它是什么 .

编辑：OOOOH我需要使用MAMP或其他什么东道主？

8 回答

7

如果您收到如下错误：

SyntaxError：embedded：意外的令牌（107：9）105

可能你错过了一个花括号

回复于 2024-04-28T18:24:41+08:00

尝试添加webpack，它解决了我的项目中的类似问题 . 特别是“预设”部分 .

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },

回复于 2024-04-28T18:24:41+08:00

94
将 type="text/jsx" 添加到 script 的 src 属性，用于包含必须由JSX Transformer转换的JavaScript文件，如下所示：
```
<script type="text/jsx" src="./lander.js"></script>
```
然后，您可以使用MAMP或其他服务在localhost上托管页面，以便所有内容都可以工作，如here所述 .

谢谢各位的帮助！
回复于 2024-04-28T18:24:41+08:00
19
JSTransform是deprecated，请使用babel代替 .
```
<script type="text/babel" src="./lander.js"></script>
```
回复于 2024-04-28T18:24:41+08:00
2
添加 type="text/babel" 作为脚本标记的属性，如下所示：
```
<script type="text/babel" src="./lander.js"></script>
```
回复于 2024-04-28T18:24:41+08:00
4

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

回复于 2024-04-28T18:24:41+08:00

如果你有类似的东西

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

回复于 2024-04-28T18:24:41+08:00

19

你拥有的代码是正确的 . 需要将JSX代码编译为JS：

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

回复于 2024-04-28T18:24:41+08:00

ReactJS：“Uncaught SyntaxError：Unexpected token <”

8 回答

相关问题