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>

如何在React中使用map函数实现这一目标？

Answer 1

您可以使用modulus(Reminder)。模数将告诉您给定整数的除法提醒。

余数运算符返回剩余的余数操作数除以第二个操作数。它总是需要的标志红利，而不是除数。它使用内置的modulo函数产生结果，即除var1的整数余数按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 2

您可以尝试将数组转换为包含三个元素的数组的子集，然后将它们映射到吐出您想要的内容。

在这里查看示例Split array into chunks of N length

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>

React：循环数据并创建连续三个项目的行

3 个答案: