时间戳

首页 > 解决方案 > 如何在 React 中从 Array 中获取一定数量的元素

javascript - 如何在 React 中从 Array 中获取一定数量的元素

问题描述

好的，所以我有一个显示卡片的前端。信息来自我的 GraphQL api。它发出请求并将道具发送到卡片组件。我有不同尺寸的卡片。我希望数组中的前 3 个元素用于小卡片，然后将其余元素用于大卡片。我怎样才能做到这一点？

我现在的反应代码是：

           {loading ? (
              <h1>Loading Campaigns...</h1>
            ) : (
              data && data.campaigns.map(campaign => (
                <Grid item xs={12} sm={6} md={4} key={campaign.id}>
              <Card campaign={campaign} cbody = {campaign.body} title = {campaign.title}
              
              />
              </Grid>
              ) )
            )}

Campaign 基本上是数组中的每个元素。

标签： javascriptarraysreactjsmaterial-ui

解决方案

像这样使用slice：

data.campaigns.slice(0,3).map(...)

因此，对于这种情况，您最终会得到两张地图，但这很好。

或者您可以使用当前的索引map并检查是否index小于3，并直接在那里进行条件渲染

推荐阅读