亲宝软件园·资讯

展开

React中映射一个嵌套数组实现demo

Jovie 人气:0

正文

嵌套数组本质上是一个数组的数组,你可以把它们想象成一个表格,或者一个二维网格。为了映射一个嵌套数组,你可以使用平面和映射数组函数的组合,或者使用映射中的映射。

你可能想使用哪种方法取决于你的情况,所以我将用一个例子来解释。如果你的数据只是一个一维数组,你可以简单地使用一个普通的地图,你可以通过这个教程查看。

平面+地图

flat函数将我们的二维数组转化为一维数组,然后我们可以简单地将其映射到上面以产生我们的组件。在这个例子中,我创建了一个简单的购物清单,并将一些物品按食物类别分组:

const shoppingCart = [
    ['apple', 'banana', 'cherry'],
    ['eggs', 'milk'],
    ['carrots', 'onions'],
];

这里是我们组件的代码:

function ShoppingListItem({ item }) {
    return <li className="bg-neutral-800 p-2 font-normal shadow">{item}</li>;
}
function ShoppingList() {
    return (
        <div className="flex h-screen w-screen items-center justify-center">
            <div className="flex flex-col items-start justify-center rounded bg-neutral-800 p-8 text-3xl font-bold text-white shadow">
                <h1 className="w-full border-b-8 pb-2">Shopping List</h1>
                <ul>
                    {shoppingCart.flat().map((item) => (
                        <ShoppingListItem key={item} item={item} />
                    ))}
                </ul>
            </div>
        </div>
    );
}

这就是我们的页面的样子。

相关的物品被分组了,但为了显示它们,我们只想得到一个物品的列表。这种方法是最简单的方法,当你的数据被分组在一起并不重要时,这种方法很有用。代码更短,但代价是简化了我们的数据结构。另一个例子可能是像Instagram feed这样的东西,你从不同的用户那里得到帖子,然后把它们都放到一个feed中。

使用嵌套地图

在很多情况下,你可能想保持你的嵌套数据的结构。在这个例子中,我们将重构我们的购物清单,把我们的食物组放在一起:

function ShoppingListItem({ item, white }) {
    return (
        <div
            key={item}
            className={ //Just to have striped rows
                'rounded p-5 ' +
                (white
                    ? 'bg-neutral-700 text-white'
                    : 'bg-neutral-100 text-black')
            }>
            {item}
        </div>
    );
}
function ShoppingListRow({ items, white }) {
    return (
        <li className="flex gap-2">
            {items.map((item) => (
                <ShoppingListItem key={item} item={item} white={white} />
            ))}
        </li>
    );
}
function ShoppingListGrouped() {
    return (
        <div className="flex h-screen w-screen items-center justify-center">
            <div className="flex flex-col items-start justify-center gap-8 rounded bg-neutral-800 p-8 text-3xl font-bold text-white shadow">
                <h1 className="w-full border-b-8 pb-2">Shopping List</h1>
                <ul className="flex flex-col gap-2">
                    {shoppingCart.map((row, i) => {
                        return (
                            <ShoppingListRow
                                key={row.join()}
                                items={row}
                                white={i % 2 === 0}
                            />
                        );
                    })}
                </ul>
            </div>
        </div>
    );
}

为了保持代码的整洁,我把它分解为一个购物清单项目、一个购物清单行和整个购物清单的组件。我发现在这种情况下,这是一个非常好的方法,因为你可以从较小的、不太复杂的构件中建立起你的组件。有了这种方法,问题就从如何在一个地图内进行映射,变成了如何在一个数组上进行映射,并在两种情况下进行。

下面是我们的更漂亮的购物清单的样子。

现在,这些行不再是在一个大的列表中,而是被保存在不同的列表中,并使用了TailwindCSS的一些花哨的样式,你可以在这里准备更多的东西。这种方法在很多情况下都很有用,比如表格、网格等等。我们也可以很容易地用两个地图来写第一个例子,使用React Fragment,选择权完全在你手中。

希望通过这两个例子中的一个,你能够在你的场景中通过一个嵌套数组进行映射,更多关于React映射嵌套数组的资料请关注其它相关文章!

加载全部内容

相关教程
猜你喜欢
用户评论