React JSX"Parse Error:Unexpected identifier"

Question

目前正在尝试学习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>标签它工作正常但否则会抛出错误:

Uncaught Error: Parse Error: Line 27: Unexpected identifier

<button onChange={this.logout}> Logout ... ^

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

Answer 1

你试图从函数中返回两个div.在文档中它说:

目前,在组件的渲染中,您只能返回一个节点; 如果你有一个要返回的div列表,你必须将你的组件包装在div,span或任何其他组件中.

不要忘记JSX编译成常规js; 返回两个函数并不能真正理解语法.同样,不要将一个以上的孩子放在三元组中.

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