1

以下に示すように、react コンポーネントに render メソッドがあり、4 x 4 のグリッドが表示されます。

商品を4つに分けたいのですが、どうすればいいですか？

たとえば、12 個の製品、4 個のグループが 3 つある場合、表示する必要があります。

XXXX

XXXX

XXXX

productList1、productList2、productList3 を使用できますが、拡張可能にする必要があります。たとえば、グリッドは 40 個の製品を使用できるため、10 x 4 グリッドになります。

render() {

  let productList = this.props.products.map( (p, i) => {
    if(i < 4){
      return (
        <ul key={i}><li>{p.name}</li></ul>
      );
    } else {
      return (
        <span>not sure</span>
      );
    }
  });

  return (
    <section>          
      {/* 4 products */}
      <div className="row">
        {productList}
      </div>

      {/* the next 4 */}
      <div className="row"> 
        {productList2}
      </div>

      {/* and the next 4 */}
      <div className="row"> 
        {productList3}
      </div>
    </section>   
  )
}
4

1 に答える 1

2

あなたが望むことは不可能ですが、ここにまともな（私が思う）解決策があります.

var allProds = yourProds,
    prodList = [], i,
    products = [];
for (i = 0; i < allProds.length; i++) {
    if (i % 4 ===0) {
       products.push(prodList);
       prodList = [];
    }
    prodList.push(allProds[i]);
}

これはテストされていません

次に、html を返すときに、products 配列内の各配列をループして、一度に 4 つ出力することができます。

于 2015-08-14T03:16:22.957 に答える