陣營：遍歷數據並創建三個項目排在一排

Question

我有一個項目數組，9確切附在我的狀態：

state = { 
    menuItems: [ 
     { 
      id: 0, 
      name: 'Foods', 
      iconSrc: 'food.jpg' 
     }, 
     { 
      id: 1, 
      name: 'Drinks', 
      iconSrc: 'drinks.jpg' 
     }, 
     { 
      id: 2, 
      name: 'Snacks', 
      iconSrc: 'snacks.jpg' 
     } 
    ] 

，並要循環他們，但我有9數組中的項目，要做到以下幾點：組陣列中每三個項目下的一個新的div，像這樣：

<div class="row-container"> 
    <div class="col-4"> 
     <div class="col-2">Item 1</div> 
     <div class="col-2">Item 2</div> 
     <div class="col-2">Item 3</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">Item 4</div> 
     <div class="col-2">Item 5</div> 
     <div class="col-2">Item 6</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">Item 7</div> 
     <div class="col-2">Item 8</div> 
     <div class="col-2">Item 9</div> 
    </div> 
</div> 

如何做到這一點使用內無反應的地圖功能？

Answer 1

您可以嘗試將數組轉換爲包含三個元素的數組的子集，然後映射它們以吐出您想要的東西。

看看這裏的一個例子Split array into chunks of N length

Answer 2

你可以使用modulus(Reminder)。 Modulus會告訴你提供給定整數的除法。

求餘運算符返回餘遺留當一個操作數 由第二操作數劃分。它始終採取分紅的標誌，而不是除數。它採用了內置modulo功能 產生的結果，這是var2

將var1 的整數餘例

this.state.menuItems.map((item, index) => { 
    if (((index + 1) % 3) === 1) { 

    return (
     <div className="col-4"> 
     <div className="col-2">{item.name}</div> 
    ); 

    } else if (((index + 1) % 3) === 2) { 

    return (<div className="col-2">{item.name}</div>); 

    } else if (((index + 1) % 3) === 0) { 

    return (
     <div className="col-2">{item.name}</div> 
     </div> 
    ); 

    } 
}); 

Answer 3

如果我正確理解你的問題，這應該工作，讓我知道如果這是你的意思請

renderMenuItems() { 
    let items = this.state.menuItems.map((item, index) => { 
     return ( 
     <div class="col-4" key={item.id}> 
      <div class="col-2">{item.id}</div> 
      <div class="col-2">{item.name}</div> 
      <div class="col-2">{item.iconSrc}</div> 
     </div> 
     ); 

    }); 
    return items; 
} 

然後裏面渲染：

<div class="row-container"> 
    {this.renderMenuItems()} 
</div> 

這將產生：

<div class="row-container"> 
    <div class="col-4"> 
     <div class="col-2">0</div> 
     <div class="col-2">Foods</div> 
     <div class="col-2">food.jpg</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">1</div> 
     <div class="col-2">Drinks</div> 
     <div class="col-2">drinks.jpg</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">2</div> 
     <div class="col-2">Snacks</div> 
     <div class="col-2">snacks.jpg</div> 
    </div> 
</div>