Render nuovo elemento onClick in react.js

Question

Sono nuovo di reagire e sto cercando di rendere un nuovo elemento 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; 

    }, 

Questo è l'elemento che deve apparire:

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> 
      ); 
     } 
    }); 

ma non sembra, invece reagire rende questo html:

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

sono abbastanza sicuro che sto facendo alcune cose piuttosto semplice sbagliato, ma non riesce a capire wh a. Non è possibile chiamare elementi diversi come questo?

Answer 1

tuo react.js nome del componente inizia con una lettera minuscola, dovrebbe iniziare con un maiuscolo case leter: var WantToRemember = React.createClass(...) e React.render(<WantToRemember />,....

Il JSX compilatore richiede per i nomi dei componenti di iniziare con una lettera maiuscola (vedi jsx docs on this):

di rendere un Reagire componente, basta creare una variabile locale che inizia con una lettera maiuscola:

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

Answer 2

Si dovrebbe passare un Reagire elemento React.render al posto del tag stesso, qualcosa di simile:

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