目前正在尝试学习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 onChange = {this.logout}>登出 …
^
解决方法
你试图从函数中返回两个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(带按钮)移动到第一个根区域.
