如何修复babel react“未捕获SyntaxError:意外令牌<”
如何修复babel react“未捕获SyntaxError:意外令牌<”
提问于 2016-06-19 15:37:11
我在通过CDN设置react时遇到问题。
她是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>下面是我的app.js：
var myItems = {
items:
["Widget","Gear","Sprocket","Spring","Crank","Lever","Hose","Tube",
"Wheel","Housing","Case"]
}
var FilteredList = React.createClass({
filterList: function (event) {
var updatedList = this.props.initialItems.items;
updatedList = updatedList.filter(function (item) {
return item.toLowerCase().search(event.target.value.toLowerCase()) !== 1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
items: []
}
},
componentWillMount: function(){
this.setState({items: this.props.initialItems.items})
},
render: function(){
return (
<div className="myList">
<input type="text" placeholder="Search" onChange={this.filterList} />
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function (item) {
return <li key={item}>{item}</li>;
})
}
</ul>
);
}
});
ReactDOM.render(<FilteredList initialItems={myItems} />,
document.getElementById('container'));当运行它时，我得到以下错误：
app.js:31 Uncaught SyntaxError: Unexpected token <
你知道怎么修复它吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-19 16:18:45
即使您已经将babel-standalone添加到您的页面，您仍然需要告诉它来转换您的app.js文件。
您可以通过将type="text/babel"添加到脚本标记来完成此操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"> </script>
<script type="text/babel" src="js/app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>仅供参考，您还可以使用以下命令内联转换代码：
Babel.transform(input, { presets: ['es2015'] }).code;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37904990
复制相关文章
相似问题
腾讯云开发者
