相关疑难解决方法(0)

假设我有一个Javascript数组,如下所示:

["Element 1","Element 2","Element 3",...]; // with close to a hundred elements.

什么方法适合将数组块(拆分)到许多较小的数组中,比如最多10个元素？

我遇到了这个逻辑的问题,因为react/jsx不允许将非关闭标记添加到数组/子组件中.例如,使用bootstrap css我想为每 4列添加一行.

所以逻辑如下:

在ex:中添加一个开始行<div className="row">,然后在该行内循环,每个循环追加一列ex:<div className="column>{this.data}</div>当循环达到4时检查if(i % 4 == 0)并添加一个结束</div>标记,同时添加新的行标记<div className="row">;

下面的代码可以使用另一种语言,但是在反应中这是不可行的,因为我们推送一个结束标记和一个开始标记(这是无效的jsx):

generateColumns(columns) {
 let newColumns = [];

 columns.forEach(function(column, idx) {
  newColumns.push( <div className="column"> some data </div> );

  if (idx % 4 == 0) {
   // Here we end the row and start a new row, works in any other language.
   newColumns.push( </div> <div className="row"> );
  }
 });

 // This array now has the proper tags …

我正在使用react,我希望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>