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，等等。

我想要的脚本是这样的：

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

在你的渲染中的某个地方＆＃39;功能

另外，你能说一下为什么你需要渲染这些空行吗？

React JS for循环内部渲染

1 个答案: