React循环列表最后一条不显示borderBottom

最新推荐文章于 2025-07-31 11:10:10 发布

原创最新推荐文章于 2025-07-31 11:10:10 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

css样式同时被 2 个专栏收录

5 篇文章

订阅专栏

react学习

1 篇文章

订阅专栏

本文探讨了在React项目中，如何确保循环列表中最后一个元素不显示border的问题，通过代码示例和解决方案展示了如何应用条件样式来实现这一目标。

小记：

刚接触React，在做项目的时候遇到一个问题，就是在循环的列表中，其他数据的View加一个borderBottom，让最后的一个数据的样式没有

图示：

代码：

return books.map((book, i) => {
  return(
    <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>
      <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>            
       {book.title}
      </Text>
    </View>
  );
});

传送门：原文章