reactjs – 如何破解.map功能

发布时间：2020-12-15 20:16:06 所属栏目：百科来源：网络整理

导读：如何打破.map功能？代码示例如下. 我想在索引达到5时打破外观,因为我只想将5个头像渲染到屏幕上. View style={{ flexDirection: 'row',marginTop: 20,marginLeft: 30 }} { peopleGroup.map((people,i) = { if(i5) { return ( Avatar key={people.id} width={

如何打破.map功能？代码示例如下.
我想在索引达到5时打破外观,因为我只想将5个头像渲染到屏幕上.

<View style={{ flexDirection: 'row',marginTop: 20,marginLeft: 30  }}>
    {
      peopleGroup.map((people,i) => {
        if(i<5) {
          return (
            <Avatar
              key={people.id}
              width={30}
              position='absolute'
              containerStyle={{ transform: [{translate: [-28 + (28 * i),1 - (i * 0.1)]}] }}
              small
              rounded
              source={{uri: people.image}}
              activeOpacity={0.7}
              />
          )
        }else if(i===5) {
          return (
          <View key={i} style={{ transform: [{translate: [(25 * i),9,0]}]  }}>
            <Text>{peopleGroup.length}</Text>
          </View>
          )
        }
      }
      )
    }
    </View>

解决方法

在映射之前使用Array.slice.

peopleGroup
.slice(0,5) // creates a copy of original,5 items long
.map(...) // subsequent operations work on the copy

田田！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!