反应：遍历数据并创建一行，每行三项 [英] React: Loop over data and create rows with three items in a row

问题描述

我有一个项目数组，精确地附加到我的状态9：

I have an array of items, 9 be exact attached to my state:

 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下，如下所示：

and want to loop over them, however i have 9 items in the array and want to do the following: group every three items in the array under a new div, like so:

<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函数实现这一目标？

How do I achieve that using the map function within React?

推荐答案

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

You can try to transform the array into subset of arrays containing three elements and then map them to spit what you want.

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

这篇关于反应：遍历数据并创建一行，每行三项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！