gpt4 book ai didi

javascript - 如何修复 babel react "Uncaught SyntaxError: Unexpected token <"

转载 作者:搜寻专家 更新时间:2023-11-01 04:51:34 25 4
gpt4 key购买 nike

我在通过 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 <

知道如何解决吗?

最佳答案

即使您已将 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;

关于javascript - 如何修复 babel react "Uncaught SyntaxError: Unexpected token <",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37904990/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com