が反応：私はアイテムの配列を持っている

Question

行の3つの項目を持つ行をデータ上でループして作成し、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の下のアレイ内のすべての3つの項目、：

<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

3つの要素を含む配列のサブセットに配列を変換し、必要なものを吐くようにマップできます。

はあなたがmodulus(Reminder)の使用を得ることができ、たとえば、ここSplit array into chunks of N length

Answer 2

を見て。モジュラスは、与えられた整数の除算を通知します。

オペランドを第2オペランドで除算したときの余りを返します。除数ではなく常に の符号がかかります。それは私が正しくあなたの質問を理解していれば、これがなければならないビルトインmodulo機能 に結果を生成使用し、var2

例

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

でvar1 を分割する整数の剰余であります仕事があれば、私に知らせてください。

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>