我想为我的grid创建分页链接。我将maxPages(number)属性传递给组件,但我无法在render方法中使用。我该怎么办?
var Pagination = React.createClass({
render: function(){
return(
<div class="text-center">
<ul class="pagination">
<li><a href="#">«</a></li>
{for (var i=0;i <10;i++;)
{
return( <li><a href="#">i + 1 </a></li>);
}
}
<li><a href="#">»</a></li>
</ul>
</div>);
}});
答案 0 :(得分:18)
您可以在渲染之前运行循环(请注意for
循环中存在错误)
var lis = [];
for (var i=0; i<10; i++) {
lis.push(<li><a href="#">{i + 1}</a></li>);
}
var Pagination = React.createClass({
render: function(){
return(
<div class="text-center">
<ul class="pagination">
<li><a href="#">«</a></li>
{lis}
<li><a href="#">»</a></li>
</ul>
</div>
);
}
});
答案 1 :(得分:7)
您只能将表达式嵌入JSX中。
<ul className="pagination">{children}</ul>
转换为类似
的内容React.createElement('ul', {className: 'pagination'}, children);
您现在看到如何取代for
永远不会有children
循环?语句不能在函数调用表达式中。
您可以事先创建一个数组,例如adeneo showed in their answer。