Question

我在下面显示的react组件中有render方法，它显示一个4乘4的网格。

我想将产品分成4组，我该怎么做？

例如，如果我有12个产品，3组4个，我需要显示

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

Answer 1

虽然你想要的是不可能的，但这是一个不错的（我认为）解决方案。

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数组中的每个数组，并一次输出四个。

使用map（）将react组件中的数组渲染为组

1 个答案: