twitter-bootstrap - react : Render new row every 4th column

Question

我正在使用 react，并且我想每 4 列渲染一个新行。

我的代码:

function Product(props) {
  const content = props.products.map((product) => (
        <div className="row" key={product.id}>       
          <article key={product.id} className="col-md-3"></article>
        </div> )
  );
  return (
    <div>
        {content}
    </div>
  );
}

我尝试通过传递如下所示的条件来尝试该方法:

if (product.id % 4 == 1)，在列周围，但它不起作用...

这就是我想要发生的事情:

<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

Answer 1

1. 将您的产品分组为(最多)4 个元素的行，即

   [1,2,3,4,5,6,7,8] => [ [1, 2, 3, 4], [5, 6, 7, 8 ] ]

2. 迭代组以生成行，并在内部循环中迭代项目以显示列

要计算行数(每行有 4 个项目)，请使用 Math.ceil(props.products.length/4)。然后创建一个行数组。给定 2 行(8 个项目):Array(2)。由于您无法映射未初始化元素的数组，因此您可以使用展开语法:[...Array(2)]，它返回[ undefined, undefined ]。

现在您可以将这些 undefined 条目映射到行中:每行从产品中获取 4 个元素:[ undefined, undefined ].map( (row, idx) => props.products .slice(idx * 4, idx * 4 + 4) ) ) (编辑注释更改为 slice 因为 splice 改变了原始数组)。结果是一个数组的数组(项目行)。

您可以迭代行，并在每次迭代中迭代给定行中的项目。

https://jsfiddle.net/dya52m8y/2/

const Products = (props) => {
    // array of N elements, where N is the number of rows needed
    const rows = [...Array( Math.ceil(props.products.length / 4) )];
    // chunk the products into the array of rows
    const productRows = rows.map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ); );
    // map the rows as div.row
    const content = productRows.map((row, idx) => (
        <div className="row" key={idx}>    
          // map products in the row as article.col-md-3
          { row.map( product => <article key={product} className="col-md-3">{ product }</article> )}
        </div> )
    );
    return (
        <div>
          {content}
        </div>
    );
}