Đối với vòng lặp trong phương thức render phản ứng

Question

Tôi muốn tạo liên kết phân trang cho grid.I của tôi vượt qua maxPages (số) tài sản để thành phần nhưng tôi không thể sử dụng cho trong phương pháp render. Tôi có thể làm gì ?

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

}}); 

Answer 1

Bạn có thể chạy vòng lặp trước khi vẽ (lưu ý rằng có một lỗi trong for vòng lặp của bạn)

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

Answer 2

Bạn chỉ có thể nhúng biểu thức vào JSX.

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

được chuyển thành một cái gì đó giống như

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

Bạn có thấy bây giờ làm thế nào bạn không bao giờ có thể có một vòng lặp for ở vị trí của children? Các câu lệnh không thể ở bên trong một biểu thức gọi hàm.

Bạn có thể tạo một mảng trước, như adeneo showed in their answer.