React中的意外令牌

时间:2015-10-01 22:28:01

标签: javascript reactjs babeljs

我收到以下错误:

events.js:72
        throw er; // Unhandled 'error' event
              ^
SyntaxError: /vagrant/resources/assets/js/react/react_app.js: Unexpected token (366:10)
  364 | var InvestorsTable = React.createClass({
  365 | 
> 366 |     mixins: [Polling, StateHandler, ComponentBase],
      |           ^
  367 | 
  368 |     render: function() {
  369 |         return(
    at Parser.pp.raise (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.jsxParseExpressionContainer (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:301:8)
    at Parser.pp.jsxParseElementAt (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:370:30)
    at Parser.pp.jsxParseElementAt (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:362:30)
    at Parser.pp.jsxParseElement (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:398:15)
    at Parser.parseExprAtom (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:410:21)
    at Parser.pp.parseExprSubscripts (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)

此错误是由以下代码引起的:

var InvestorsTable = React.createClass({

    mixins: [Polling, StateHandler, ComponentBase],

    render: function() {
        return(
            <Table data={this.state.data} />
        );
    }
});

这种语法无效?我的&#34;意外令牌在哪里?#34;?我有另一堂课:

var CapitalRaised = React.createClass({

    mixins: [Polling, StateHandler, ComponentBase],

    ...

});

该类在编译及编译 BEFORE 上述类时不会抛出错误。就像我无法看到问题是什么......

1 个答案:

答案 0 :(得分:4)

您在该类上方的文件中有一个未关闭的JSX元素父。由于您还没有显示完整的代码,因此这是一个示例。

var CapitalRaised = React.createClass({
  render(){
    return (<div>);
  }
});

var InvestorsTable = React.createClass({

  mixins: [Polling, StateHandler, ComponentBase],

  render: function() {
    return(
      <Table data={this.state.data} />
    );
  }
});

<div>元素未关闭。这将抛出Unexpected token (9:8),因为JSX采用<div> ... { mixins: [Polling的形式,而在JSX中,{}内的内容应该是JS表达式,mixins:不是有效的开始表达。