Reagieren JS Tabellenkörper Komponente nicht

Question

<script type="text/jsx"> 

     var data=[]; 
     data = JSON.parse('{!Accounts}'); 
     console.log('====data=====',data[0]); 
     var accountTableBody = React.createClass({ 

      render:function(){ 

       return(
        <tr> 
         <td>{this.props.Account.Name}</td> 
         <td>{this.props.Account.Type}</td> 
         <td>{this.props.Account.Id}</td> 
        </tr> 
       ); 
      } 
     }); 

     var accountTable = React.createClass({ 
      render: function() { 

       var bodyEle =[]; 

       this.props.children.forEach(function(acc) { 
        bodyEle.push(<accountTableBody Account={acc} key={acc.Name} />); 
       }); 

       return(
        <table> 
         <thead> 
          <tr> 
           <th>Name</th> 
           <th>Type</th> 
           <th>Id</th> 
          </tr> 
         </thead> 
         <tbody> 
          {bodyEle} 
         </tbody> 
        </table> 
       ); 
      } 
     }); 
     var element = React.createElement(accountTable, this.props, data); 
     React.render(element, document.getElementById('content')); 
    </script> 

Dies ist der JSX Code rendert ich es nur den Tabellenkopf Anzeige verwende aber nicht der Tabellenkörper

ich in einige denken, wo meine zweite accountTableBody Komponente.

In-Browser-Konsole Ich bin keine Fehler bekommen

Jede Idee, was der Fehler ist, ich tue ..

Answer 1

Variablen Namen mit Großbuchstaben beginnen

var AccountTable = React.createClass({ ... }) 
var AccountTableBody = React.createClass({ ... }) 

var element = React.createElement(AccountTable, this.props, data);