jsx - 物化网格未知项目数

Question

我正在使用 Mataralize css 网格系统。我将从后端获得的所有项目插入网格中，但我事先不知道我会得到多少项目。有没有一种方法可以.row根据数组中的项目数动态添加分类？这是我的解决方法代码，但它不容易使用，我正在寻找一种更简单的方法：首先我将数组拆分为较小的数组，每个数组包含 3 个项目（我希望每行包含 3 个项目）：

let temporary;
  let chunk = 3;
  let newProdsArr = [];
  for (let i = 0; i < products.length; i += chunk) {
    temporary = products.slice(i, i + chunk);
    newProdsArr.push(temporary);
  }

然后我在 JSX 中做一个嵌套循环

return (
    <section className="container">
      {newProdsArr.map((products, i) => (
        <div className="row" key={i}>
          {products.map((product) => (
            <ProductItem
              key={product.prodToken}
              product={product}
            ></ProductItem>
          ))}
        </div>
      ))}
    </section>
  );
``` is there a simpler way? or should use the flexbox modal (to be able to do ```flex-wrap``` ) and then insert as many products as there is dynamically

标签： jsxmaterializecss-grid