Bootstrap Satırlar

Question

Bir reactJS uygulaması ile çalışıyorum ve aşağıdaki kodu vardır: Bu düzende HTML çıktısı

renderProductBlock(product, index) { 
    return (
     <div className="product col-xs-4"> 
      <span className="product-name">{product.name}</span> 
      <span className="product-price">{product.price}</span> 
      <a href="#" className="btn btn-primary">Buy Now</a> 
     </div> 
    ); 
} 

renderProductList() { 
    let blocks = []; 

    _.forEach(product, (item, index) => { 
     const productBlock = this.renderProductBlock(item, index); 

     if(productBlock) { 
      blocks.push(productBlock); 
     } 
    }); 

    return blocks; 
} 

render() { 
    const productsBlock = this.renderProductList(); 

    if(productsBlock) { 
     return (
      <div className="products"> 
       <div className="row"> 
        {productsBlock} 
       </div> 
      </div> 
     ) 
    } 
} 

:

<div class="products"> 
    <div class="row"> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
    </div> 
</div> 

Ne benim için en iyi yol olacağını Bunun gibi bir satır div her 3 ürünleri sarmak için şu döngüler içine önyükleme satır eklemek için:

hafifçe ahmak için

<div class="products"> 
    <div class="row"> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
    </div> 
    <div class="row"> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
     <div class="product col-xs-4"> 
      Content 
     </div> 
    </div> 
</div> 

Maalesef le soru ama bunu doğru göremiyorum.

Answer 1

sadece kaç bloktan takip ederim döngü içinde işleme edilmiş ve üç blok işlenir kez üst üste grup onları :

renderRow() { 
    return (
     <div class="row"> 
      {block} 
     </div> 
    ); 
} 

renderProductList() { 
    let blocks = [], rows = []; 
    _.forEach(product, (item, index) => { 
     const productBlock = this.renderProductBlock(item, index); 
     if (productBlock) { 
      blocks.push(productBlock); 
     } 
     if (block.length >= 3) { 
      const row = this.renderRow(blocks); 
      if (row) { 
       rows.push(row); 
      } 
      blocks = []; 
     } 
    });  
    const row = this.renderRow(blocks); 
    if (row) { 
     rows.push(row); 
    } 
    return rows; 
}