ReactJS - 未捕获的错误：解析错误：第27行：意外的令牌

Uncaught Error: Parse Error: Line 27: Unexpected token .

好像不应该有一个“”

我该如何解决？

这里是我的整个代码

var PageHandler = React.createClass({ 
    getInitialState: function() { 
     return { 
      page: '' 
     }; 
    }, 

    render: function(){ 
     return(
      {this.state.page == '' && <MainPage />} // THIS IS LINE 27 
     ); 
    } 

}); 

var MainPage = React.createClass({ 
    render: function(){ 
     return(
      <div className="main-page"> 
       <a href="javascript:void(0);">Open</a> 
      </div> 
     ); 
    } 
});

这是我的.html文件

<script type="text/jsx"> 
    //var PageHandler = React.createElement(PageHandler); 
    //React.render(PageHandler, document.body); 
    React.render(<PageHandler />, document.body); 
    </script>

编辑现在我发现，如果我添加<div>...</div>它的工作。

render: function(){ 
     return(
      <div> 
      {this.state.page == '' && <MainPage />} 
      </div> 
     ); 
    }

这是为什么？

来源

2015-04-26 Stevik

该行在语法上不正确。很难说它应该是什么，因为它不清楚你想表达什么。你在'{}'里面看到了一个表达式（嵌入的HTML标记除外），这是无效的。 – Pointy

react中的render方法必须返回一个父元素。当你想到它将编译jsx的时候，很容易看出它为什么很难。 createElement有这些参数：

createElement(
    string/ReactClass type, 
    [object props], 
    [children ...] 
)

所以，你会的MainPage编译为：

return(
      React.createElement("div", {className: "main-page"}, 
       React.createElement("a", {href: "javascript:void(0);"}, "Open") 
      )

它可以很容易地看到，它创建了一个div，道具只是类的名称，孩子是一个a。

但看

{this.state.page == '' && <MainPage />}

会有什么编译成？第一个参数是什么？对于要创建的元素，它没有明确的类型。当你把它包装都在一个div，它确实它将编译到这一点：

React.createElement("div", null, 
      this.state.page == '' && React.createElement(MainPage, null), " // THIS IS LINE 27" 
)

当然，这可能不是你想要它做的事情，但希望它显示了REACT为试图做的。

来源

2015-04-27 09:13:29

ReactJS - 未捕获的错误：解析错误：第27行：意外的令牌

回答

相关问题