React JS for渲染内部循环

Question

我是React JS的新手，我不确定如何执行for循环以呈现可变次数的内容。 这是我的代码：

<div className="product-selector__products">
    { this.props.products.sort(function(a,b) { return a.ranking - b.ranking }).map((p) => { 

        const className = "product" + ((this.props.selectedProductIds.indexOf(p.id) !== -1) ? " product--selected" : "");
        const descriptionHtml = { __html: p.description };
        const nameHtml = { __html: p.name };

        return (
            <div className={className} key={ p.id } onClick={this.onProductClick.bind(this, p.id)}>

                <div className="product__image">
                    <img src={`/~/media/Bayer CropScience/Country-United-States-Internet/Comparison Tool/img/logos/${p.id}_sm.png`} alt={p.name} />
                </div>
                <div className="product__info">
                    <div className="product__name" dangerouslySetInnerHTML={nameHtml}></div>
                    <div className="product__description" dangerouslySetInnerHTML={descriptionHtml}></div>
                </div>
                <div className="product__message" ref={ p.id }>
                    <div className="product__message-tooltip">Please remove a product<br/>before adding another</div>
                    <div className="product__message-triangle-down"></div>
                </div>
            </div>     
        );  
    }) }

    /* Here I want to render <div className="product product--empty"> </div> a variable number of times*/

</div>

它生成一个产品项目网格，每行4个项目。

我需要在最后一行的末尾添加空div，以使每行中的div数量相同。

因此，如果this.props.products.length == 7我需要1个空div，如果我有5个产品，则需要3个空div， this.props.products.length == 7 。

我想要的脚本是这样的：

let remainder = 4 - (this.props.products.length % 4);
  for (let i = 0; i < remainder; i++){
    return ( <div className="product product--empty"> </div> )
  }  

我不确定如何正确地将其放入代码块中。

Answer 1

我刚刚修改了一点您的代码。

renderRemainders() {
  let products = []
  let remainder = 4 - (this.props.products.length % 4)

  for (let i = 0; i < remainder; i++){
    products.push( <div className="product product--empty"> </div> )
  }

  return products
}

然后放

 { this.renderRemainders() }

您的“渲染”功能中的某个位置。

另外，您能否说说为什么需要渲染这些空行？