ReactJS

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>

编辑现在我发现如果我添加 <div>...</div> 它就起作用了。

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

为什么会这样？

Answer 1

react 中的 render 方法必须 return 单个父元素。当您考虑将 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，props只是class的名字，child是一个a.

但是看着

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

那会编译成什么？第一个参数是什么？对于要创建的元素，它没有明确的类型。当你将它全部包装在 div 中时，它会编译成这样：

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

当然，这可能不是您想要的，但希望它展示了 React 正在尝试做的事情。

ReactJS - Uncaught Error: Parse Error: Line 27: Unexpected token

ReactJS - Uncaught Error: Parse Error: Line 27: Unexpected token

javascript

react-jsx