Bootstrap Reihen in ReactJS

Question

ich mit einem reactJS App arbeiten und haben den folgenden Code:

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

Welche HTML in diesem Layout ausgibt:

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

Was wäre der beste Weg für mich sein Bootstrap-Zeilen in diesen Schleifen hinzufügen alle 3 Produkte in einer Reihe div wickeln etwa so:

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

Sorry für die etwas einfa le Frage, aber ich kann das nicht richtig verstehen.

Answer 1

halten würde nur den Überblick über die, wie viele Blöcke wurden innerhalb der Schleife verarbeitet und einmal drei Blöcke wiedergegeben werden, gruppieren sie in einer Reihe:

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