陣營JSX「解析錯誤：意外標識符」

Question

努力學習陣營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。在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（與按鈕）到第一個。

Answer 2

<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> 
     <button onClick={this.login}> Login </button> 
     <button onClick={this.logout}> Logout </button> 
    </div> 
</div> 

嘗試使用這個，似乎如果你有兩個div /節點

Answer 3

你可以做到這一點不會工作：

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>, // note the comma 
    <div> 
     <button onClick={this.login}> Login </button> 
     <button onClick={this.logout}> Logout </button> 
    </div> 
]);