reactjs - react native - CSS :last-child without a border?

Question

在 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)

Answer 1

您可以使用一些逻辑来实现这一点:

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 数组的 length - 1。