Per il ciclo nel metodo di rendering reattivo

Question

Desidero creare il collegamento di paging per la mia griglia. Passare la proprietà maxPages (numero) al componente ma non posso usarlo per il metodo di rendering. Cosa posso fare ?

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

È possibile eseguire il ciclo prima del rendering (si noti che c'è un errore nel vostro for ciclo)

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

È possibile incorporare solo espressioni in JSX.

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

viene convertito in qualcosa di simile a

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

Vedete ora come si potrebbe mai avere un ciclo for al posto di children? Le istruzioni non possono essere contenute in un'espressione di chiamata di funzione.

È possibile creare un array in anticipo, ad esempio adeneo showed in their answer.