我是反应新手,正在尝试在单击时渲染一个新元素:
var LoginButton = React.createClass({
..............
..............
clickHandle : function() {
this.rememberMe = {
active: localforage.getItem('rememberMe', function (err, key) {
return key;
})
};
if (this.rememberMe.active == true || this.rememberMe.active == 'checked')
{
document.getElementById('loginForm').submit();
}
else {
React.render(<wantToRemember />, document.getElementById('loginbuttonhere'));
}
return this.rememberMe.active;
},
这是应该出现的元素:
var wantToRemember = React.createClass({
getInitialState : function () {
return {
position: 'absolute',
display: 'block',
top: '20px',
width: '100px',
height: '100px'
}
},
render : function () {
return (
<div className="rememberPopup" style={this.state}>
<div className="row">
<div className="staylogin">
<div className="col-md-4">
<label for="checkbox">Angemeldet bleiben</label>
</div>
<div className="col-md-1">
<input type="checkbox" id="checkbox" name="remember" />
</div>
</div>
</div>
</div>
);
}
});
但它没有出现,而是 React 渲染了这个 html:
<wanttoremember data-reactid=".1"></wanttoremember>
我很确定我做错了一些非常基本的事情,但不知道是什么。难道不能像这样调用不同的元素吗?
Your react.js
组件名称以小写字母开头,它应该以大写字母开头:var WantToRemember = React.createClass(...)
and React.render(<WantToRemember />,...
.
JSX 编译器要求组件名称以大写字母开头(请参阅jsx 文档对此 https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components):
要渲染 React 组件,只需创建一个以大写字母开头的局部变量:
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)