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。在the docs中它说：

目前，在组件的渲染中，您只能返回一个节点;如果   你有一个要返回的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>
]);

反应JSX＆＃34;解析错误：意外的标识符＆＃34;

3 个答案: