阵营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);