ReactJS - Uncaught Ошибка: Ошибка синтаксического анализа: Строка 27: Неожиданный маркер

Question

Я получаю эту ошибку

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> 

EDIT А теперь я узнал, что если я добавляю <div>...</div> это работает.

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

Почему это так?

Answer 1

Метод рендеринга в реале должен возвращать один родительский элемент. Когда вы думаете о том, что он скомпилирует 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 пытается сделать.