ReactJS: “未捕获的语法错误: 意外令牌 <”

我试图开始在 ReactJS 建立一个网站。但是，当我试图将我的 JS 放在一个单独的文件中时，我开始得到这个错误: “ Uncatch SyntaxError: Un”。

我尝试将 /** @jsx React.DOM */添加到 JS 文件的顶部，但它没有修复任何问题。下面是 HTML 和 JS 文件。知道出了什么问题吗？

超文本标示语言

<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 转换器。请确保为 production-http://facebook.github.io/react/docs/tooling-integration.html#jsx预编译 JSX

然后是这个错误:

XMLHttpRequest 不能加载文件:///Users/.../lander.js。跨源请求只支持协议方案: http、 data、 chrome-exton、 https、 chrome-exton-resource

看起来我还需要做一些其他的事情来让浏览器 jsx 转换工作，但是我不确定这是什么。

编辑: OOOOH 我需要主持它使用 MAMP 或什么？

232285 次浏览
小开

您的代码是正确的。 JSX 代码需要被编译成 JS:

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

小开
最佳答案

更新 用这个代替:

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

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

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

然后，您可以使用 MAMP 或其他服务在本地主机上承载页面，以便所有包含内容都能正常工作，正如我们所讨论的 给你。

谢谢大家的帮助！

小开

添加 type="text/babel"作为 script 标记的属性，如下所示:

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

如果你有

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

JTS 变换为 不赞成，请改用 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>

小开

尝试添加网络包，它解决了类似的问题在我的项目。特别是“预设”部分。

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

如果您遇到这样的错误:

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

可能是你少了一个花括号

小开

我和你也有同样的问题，我的服务器有些地方变了

你可以试试这个

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
res.sendFile("index.html", { root });
});
小开

除了迪吉的解决方案，在尝试了他的解决方案，我的错误从来没有去。

我注意到(经过两天的头痛之后)浏览器缓存文件的方式不正确。

  • 我的浏览器无法加载缓存文件的预览，而 Express 的状态码是301。
  • 在浏览器开发工具的网络选项卡中，我得到这些文件是来自磁盘缓存的服务器。

解决方案

删除缓存的文件。通过在1小时内清除浏览器历史记录，以便删除所有缓存的文件。

小开

在我的例子中，使用 src="./<file>.js"不起作用

小开

在我的例子中，使用 src="./<file>.js"不起作用，而使用 %PUBLIC_URL%起到了作用。

<script defer async src="%PUBLIC_URL%/some-file.js"></script>

提交答案