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

您可以使用modulus（提醒）。模数会告诉您给定整数除法的提醒。

余数运算符返回一个操作数除以第二个操作数时剩下的余数。它总是采用被除数的符号，而不是除数。它使用内置函数来生成结果，即 除以的modulo整数余数var1var2

例子

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>
    );

  }
});