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行：意外的令牌

回答

相關問題