twitter-bootstrap - react :每第4列呈现新行

我正在使用react，我想每4列render新一行。

我的代码：

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>

最佳答案

这样写：

function Product(props) {
  let content = [];
  props.products.forEach((product, i) =>{
      if((i+1) % 4 == 0){
        content.push(
          <div className="row" key={product.id}>
            <article key={product.id} className="col-md-3"></article>
          </div>
        )
      }else{
          content.push(<article key={product.id} className="col-md-3"></article>);
      }
  });
  return (
    <div>
        {content}
    </div>
  );
}