在react.js渲染新元素的onClick

Question

我是新来的反应，我试图呈现一个新元素的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> 
      ); 
     } 
    }); 

但它不会出现，反而呈现的反应这个网站：

<wanttoremember data-reactid=".1"></wanttoremember> 

我敢肯定，我在做一些很基本的东西不对，但想不通WH在。难道不可能调用这样的不同元素吗？

Answer 1

你react.js组件名称以小写字母，它应该有一个大写启动案件提供者：var WantToRemember = React.createClass(...)和React.render(<WantToRemember />,...。

的JSX编译器要求的组件名称，开始用大写字母（见jsx docs on this）：

要呈现一个阵营组件，只需创建一个以大写字母开头的局部变量：

var MyComponent = React.createClass({/*...*/}); 
var myElement = <MyComponent someProperty={true} />; 
React.render(myElement, document.getElementById('example')); 

Answer 2

你应该通过一个阵营元素React.render，而不是标签本身，这样的事情：

React.render(
    React.createElement(wantToRemember) 
);