用于循环反应渲染方法 [英] For loop in react render method

问题描述

我想为我的grid创建分页链接。我将maxPages（number）属性传递给组件，但我无法在render方法中使用。我该怎么办？

I want create paging link for my grid.I pass maxPages(number) property to component but i cant use for in render method. What can i do ?

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

}});

推荐答案

您可以在渲染之前运行循环（请注意你的中有循环错误

You can run the loop before the rendering (note that there's an error in your for loop)

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>
        );
    }
});

FIDDLE

这篇关于用于循环反应渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！