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

IT技术 javascript arrays reactjs
2021-04-29 10:51:41

我有一系列项目，其中 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 函数实现这一点？

3个回答

您可以使用modulus(Reminder)。Modulus 会告诉你给定整数除法的提示。

当一个操作数除以第二个操作数时，余数运算符返回剩余的余数。它总是带被除数的符号，而不是除数。它使用一个内置的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>
    );

  }
});

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

在此处查看示例将数组拆分为 N 长度的块

如果我正确理解您的问题，这应该可行，请让我知道这是否是您的意思

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 Router 的服务器端身份验证流程 下一篇从 ReactNative-DatePickerAndroid 获取选定的日期