ReactJS 中的引导行

Question

我正在使用 reactJS 应用程序并具有以下代码：

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

在此布局中输出 HTML：

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

对我来说，将引导行添加到这些循环中以将每 3 个产品包装在一行 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>
    <div class="row">
        <div class="product col-xs-4">
            Content
        </div>
        <div class="product col-xs-4">
            Content
        </div>
    </div>
</div>

抱歉这个稍微简单的问题，但我似乎无法正确回答。

Answer 1

只需跟踪循环中处理了多少块，一旦渲染了三个块，将它们组合成一行：

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