Question

我收到此错误

未捕获错误：解析错误：第27行：意外令牌。

似乎不应该是＆＃34;。＆＃34;在这个

之后

我该如何解决？

这是我的整个代码

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方法必须返回单个父元素。当你考虑将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正在尝试做什么。

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

1 个答案: