React:循环数据，并在一行中创建包含三个项的行

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

您可以使用(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>