日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：Jovie ? 更新時(shí)間： 2023-01-11 編程語言

正文

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

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

平面+地圖

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

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

這就是我們的頁面的樣子。

相關(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)我們的購物清單，把我們的食物組放在一起：

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

下面是我們的更漂亮的購物清單的樣子。

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

原文鏈接：https://juejin.cn/post/7176280173149929533

欄目分類
最近更新