如何修复babel反应"Uncaught SyntaxError:Unexpected token<"(未捕获的SyntaxError:意外的令牌<")

本文介绍了如何修复babel反应"Uncaught SyntaxError:Unexpected token<"(未捕获的SyntaxError:意外的令牌<")的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在通过CDN进行反应设置时遇到问题.

I am having problem with react setup via CDN.

她是我的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:

and here my 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'));

运行它时，出现以下错误:

When run it I get the following error:

app.js:31 Uncaught SyntaxError: Unexpected token <

有什么想法要解决吗?

推荐答案

即使您已将babel-standalone添加到页面中，您仍然需要告诉它来转译app.js文件.

Even though you have added babel-standalone to your page, you still need to tell it to transpile your app.js file.

您可以通过在脚本标签中添加type="text/babel"来实现:

You do it by adding type="text/babel" to your script tag:

<!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>

仅供参考，您还可以内嵌代码:

Just for reference you can also transpile your code inline with:

Babel.transform(input, { presets: ['es2015'] }).code;

这篇关于如何修复babel反应"Uncaught SyntaxError:Unexpected token<"(未捕获的SyntaxError:意外的令牌<")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！