我是新来的反应者,并且正在尝试渲染一个新元素onClick:
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>
我敢肯定,我在做一些非常基本的事情,但是不能弄清楚是什么。不可能这样称呼不同的元素吗?
您的react.js组件名称以小写字母开头,应以大写字母let var WantToRemember = React.createClass(...)和开头React.render(<WantToRemember />,...。
react.js
var WantToRemember = React.createClass(...)
React.render(<WantToRemember />,...
JSX编译器要求组件名称以大写字母开头(请参阅jsx文档):
要渲染一个React组件,只需创建一个以大写字母开头的局部变量:
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; React.render(myElement, document.getElementById('example'));