React中映射一个嵌套数组实现demo
正文
嵌套数组本质上是一个数组的数组，你可以把它们想象成一个表格，或者一个二维网格。为了映射一个嵌套数组，你可以使用平面和映射数组函数的组合，或者使用映射中的映射。
你可能想使用哪种方法取决于你的情况，所以我将用一个例子来解释。如果你的数据只是一个一维数组，你可以简单地使用一个普通的地图，你可以通过这个教程查看。
平面+地图
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映射嵌套数组的资料请关注脚本之家其它相关文章！
相关文章
React+TS+IntersectionObserver实现视频懒加载和自动播放功能
通过本文的介绍，我们学习了如何使用 React + TypeScript 和 IntersectionObserver API 来实现一个视频播放控制组件，该组件具有懒加载功能，只有在用户滚动页面且视频进入视口时才开始下载视频资源,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了react项目引入antd框架方式以及遇到的一些坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家介绍了React状态更新的优先级机制源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
React函数式组件Hook中的useState函数的详细解析
Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性，这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下2022-10-10
react-router-dom v6版本实现Tabs路由缓存切换功能
今天有人问我怎么实现React-Router-dom类似标签页缓存,很久以前用的是react-router v5那个比较容易实现,v6变化挺大,但了解react的机制和react-router的机制就容易了,本文介绍react-router-dom v6版本实现Tabs路由缓存切换,感兴趣的朋友一起看看吧2023-10-10
React 进入页面后自动 focus 到某个输入框的解决方案
React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下2024-02-02
react的ui库antd中form表单使用SelectTree反显问题及解决
这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文介绍了ReactNative实现的横向滑动条效果,本文结合示例代码给大家介绍的非常详细,补充介绍了ReactNative基于宽度变化实现的动画效果,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了React和Vue的props验证,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论