Question

我有map函数的following元素，我想把它分成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>

TO：

<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>: ''}

如何在map函数内反应js后的第二个元素后打破循环

1 个答案: