使用 map() 将反应组件中的数组渲染成组

Question

我在下面显示的反应组件中有渲染方法，它显示 4 x 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() 将反应组件中的数组渲染成组

Using map() to render an array in a react component into groups

javascript

functional-programming

reactjs

map-function