如何在映射函数内 react js 上的第二个元素之后中断循环

Question

我有来自map函数的跟随元素，我想把它分成2个元素。

从这个元素：

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

自：

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

谢谢！

反应代码：

{this.props.listdisplay
.filter(item => item.status === 1)
.map((item, i) => { 
return <div className="col-md-3 col-sm-6" key={browse-by-${i}}> 
<div className="food-block"> 
<img src={item.icon} id={item.id} className="center-block img-responsive"/> 
<p className="text-center">
<a href="">{item.name}</a>
</p> 
</div> 
</div> 
}) }

Answer 1

您可以对数组进行切片并在它们之后进行映射，例如 这：

返回前

let array = this.props.listdisplay.filter(item => item.status === 1);
let length = array.length;

作为回报

array.slice(0, (length + 1) / 2).map(.....)
array.slice((length + 1) / 2, length).map(.....)

另一件事，如果你想用两个元素创建div，我可以想到两个解决方案(虽然不是一个非常漂亮的解决方案(：

首先：我们在返回之前先创建元素：

var newList = [];
var array = this.props.listdisplay.filter(item => item.status === 1);
for (var i = 0; i < array.length + 1 / 2; i++) {
var item = array[i];
i++;
var item2 = array[i];
if (item2) {
newList.push(<div class ="row">
<div class="col-md-3">item.id</div>
<div class="col-md-3">item2.id</div>
</div>);
} else {
newList.push(<div class ="row">
<div class="col-md-3">item.id</div>
<div class="col-md-3">item2.id</div>
</div>);
}
}
return <div>{newList}</div>

第二：我们可以遍历列表，我们总是存储奇数索引 nr 上的元素：

返回前

var oddItem = null;

内部返回：

{this.props.listdisplay.filter(item => item.status === 1).map((item, i) => {
if (i%2 === 1) {
oddItem= item;
}
return i%2 === 0 ? 
<div class ="row">
<div class="col-md-3">oddItem.id</div>
<div class="col-md-3">item.id</div>
</div> : '';
})}
/* If the array length is odd we remain one item in the oddItem so we need to add that too */
{this.props.listdisplay.filter(item => item.status === 1).length % 2 === 1 ? 
<div class ="row">
<div class="col-md-3">oddItem.id</div>
</div>: ''}