[英]React JS table body component is not rendering
<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
组件。
在浏览器控制台中,我没有收到任何错误
不知道我在做什么错..
以大写字母开头的名称变量
var AccountTable = React.createClass({ ... })
var AccountTableBody = React.createClass({ ... })
var element = React.createElement(AccountTable, this.props, data);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.