快捷導(dǎo)航

React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo

更新時(shí)間：2022年12月13日 10:32:36 作者：Jovie

這篇文章主要為大家介紹了React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

嵌套數(shù)組本質(zhì)上是一個(gè)數(shù)組的數(shù)組，你可以把它們想象成一個(gè)表格，或者一個(gè)二維網(wǎng)格。為了映射一個(gè)嵌套數(shù)組，你可以使用平面和映射數(shù)組函數(shù)的組合，或者使用映射中的映射。

你可能想使用哪種方法取決于你的情況，所以我將用一個(gè)例子來(lái)解釋。如果你的數(shù)據(jù)只是一個(gè)一維數(shù)組，你可以簡(jiǎn)單地使用一個(gè)普通的地圖，你可以通過(guò)這個(gè)教程查看。

平面+地圖

flat函數(shù)將我們的二維數(shù)組轉(zhuǎn)化為一維數(shù)組，然后我們可以簡(jiǎn)單地將其映射到上面以產(chǎn)生我們的組件。在這個(gè)例子中，我創(chuàng)建了一個(gè)簡(jiǎn)單的購(gòu)物清單，并將一些物品按食物類別分組：

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

這就是我們的頁(yè)面的樣子。

相關(guān)的物品被分組了，但為了顯示它們，我們只想得到一個(gè)物品的列表。這種方法是最簡(jiǎn)單的方法，當(dāng)你的數(shù)據(jù)被分組在一起并不重要時(shí)，這種方法很有用。代碼更短，但代價(jià)是簡(jiǎn)化了我們的數(shù)據(jù)結(jié)構(gòu)。另一個(gè)例子可能是像Instagram feed這樣的東西，你從不同的用戶那里得到帖子，然后把它們都放到一個(gè)feed中。

使用嵌套地圖

在很多情況下，你可能想保持你的嵌套數(shù)據(jù)的結(jié)構(gòu)。在這個(gè)例子中，我們將重構(gòu)我們的購(gòu)物清單，把我們的食物組放在一起：

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

為了保持代碼的整潔，我把它分解為一個(gè)購(gòu)物清單項(xiàng)目、一個(gè)購(gòu)物清單行和整個(gè)購(gòu)物清單的組件。我發(fā)現(xiàn)在這種情況下，這是一個(gè)非常好的方法，因?yàn)槟憧梢詮妮^小的、不太復(fù)雜的構(gòu)件中建立起你的組件。有了這種方法，問(wèn)題就從如何在一個(gè)地圖內(nèi)進(jìn)行映射，變成了如何在一個(gè)數(shù)組上進(jìn)行映射，并在兩種情況下進(jìn)行。

下面是我們的更漂亮的購(gòu)物清單的樣子。

現(xiàn)在，這些行不再是在一個(gè)大的列表中，而是被保存在不同的列表中，并使用了TailwindCSS的一些花哨的樣式，你可以在這里準(zhǔn)備更多的東西。這種方法在很多情況下都很有用，比如表格、網(wǎng)格等等。我們也可以很容易地用兩個(gè)地圖來(lái)寫(xiě)第一個(gè)例子，使用React Fragment，選擇權(quán)完全在你手中。

希望通過(guò)這兩個(gè)例子中的一個(gè)，你能夠在你的場(chǎng)景中通過(guò)一個(gè)嵌套數(shù)組進(jìn)行映射，更多關(guān)于React映射嵌套數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: