陣營JS表體成分不渲染

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> 

這是JSX代碼我使用它只是顯示錶頭，但不表體

我覺得在某些地方我的第二個accountTableBody組件。

在瀏覽器控制檯，我沒有得到任何錯誤

任何想法，就是我做的錯誤..

Answer 1

名稱開頭的變量與大寫

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

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