javascript – React JSX“Parse Error：Unexpected identifier”

目前正在尝试学习React JS / JSX并且一直在创建一个简单的登录表单：

/**
* @jsx React.DOM
*/

var loginForm = React.createClass({
    getInitialState: function() {
        return {loggedIn : false};
    },login : function(event) {
        alert('logging in');
    },logout : function(event) {
        alert('logging out');
    },render: function() {
        return (
            <div>
                <form /*action={this.server+'/login.php'}*/>
                    <label htmlFor="username">Username:</label>
                    <input type="text" id="username" name="username" />
                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" name="password" />
                </form>
            </div>
            <div>
                <button onClick={this.login}> Login </button>
                <button onClick={this.logout}> Logout </button>
            </div>
        )
    }



});

React.renderComponent(
  <loginForm />,document.body
);

如果我删除< button>标签它工作正常但否则抛出错误：

未捕获的错误：解析错误：第27行：意外的标识符

< button onChange = {this.logout}>登出 …
^

小提琴：http://jsfiddle.net/4TpnG/90/

解决方法

你试图从函数中返回两个div.在 the docs它说：

Currently,in a component’s render,you can only return one node; if
you have,say,a list of divs to return,you must wrap your components
within a div,span or any other component.

Don’t forget that JSX compiles into regular js; returning two
functions doesn’t really make syntactic sense. Likewise,don’t put
more than one child in a ternary.

所以你可以通过将两个根div包装在一个div中来解决它;或者将第二个根div(带按钮)移动到第一个根区域.