Для цикла в методе рендеринга

Я хочу создать пейджинговую ссылку для моей grid.I передать свойство maxPages (число) в компонент, но я не могу использовать его в методе рендеринга. Что я могу сделать?

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

}});

Ответ 1

Вы можете запустить цикл до рендеринга (обратите внимание, что в вашем цикле 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>
        );
    }
});

FIDDLE

Ответ 2

Вы можете вставлять выражения только в JSX.

<ul className="pagination">{children}</ul>

преобразуется в нечто вроде

React.createElement('ul', {className: 'pagination'}, children);

Теперь вы видите, как вместо children у вас не может быть цикла for? Выражения не могут находиться внутри выражения вызова функции.

Вы можете создать массив заранее, например adeneo в своем ответе.