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（帶按鈕）移動到第一個根區域。

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>
]);