reactjs – React Native – CSS：没有边框的last-child？

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

导读：在React Native中,我有一个静态的书籍数组,我映射并以堆叠的行输出,如下所示： return books.map((book,i) = { return( View style={styles.book} key={i} Text style={styles.book}{book.title}/Text /View );}); 我还通过styles.book在每本书上都有一个底

在React Native中,我有一个静态的书籍数组,我映射并以堆叠的行输出,如下所示：

return books.map((book,i) => {
  return(
    <View style={styles.book} key={i}>
      <Text style={styles.book}>{book.title}</Text>
    </View>
  );
});

我还通过styles.book在每本书上都有一个底部边框：

book: {
  borderBottomWidth: 1,borderBottomColor: '#000000'
}

我需要列表中的最后一本书没有底部边框,所以我需要对它应用borderBottomWidth：0吗？在React Native中,如何才能让列表中的最后一本书没有底部边框？ (在普通的CSS中我们会使用last-child)

您可以使用一些逻辑实现此目的：

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

这样做是检查i,迭代器是否等于books数组的长度 – 1.

（编辑：李大同）

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