TypeScript React中如何仅为数组的最后一项添加样式

• 你当前的实现逻辑存在两处核心错误：
  1. 你声明的customFields本身就是数组类型，不存在values属性，customFields.values[0]属于语法错误，自然无法触发渲染
  2. 你的判断逻辑是校验数组第一个元素是否存在，和「仅在最后一项位置加边框」的需求完全不匹配

根据你的需求，提供两种常见场景的实现方式：

场景1：给最后一个自定义字段项本身加边框 #

在遍历渲染数组的时候，通过索引判断当前项是否为最后一项，动态拼接边框样式即可：

{customFields.map((field, index) => {
  // 校验是否为数组最后一项
  const isLastItem = index === customFields.length - 1
  return (
    <View style={[styles.commonFieldStyle, isLastItem ? styles.borderContainer : {}]}>
      {/* 这里放你自定义字段的渲染内容，比如label和value的展示 */}
      <Text>{field.label}：{field.value}</Text>
    </View>
  )
})

场景2：在所有自定义字段的末尾单独加一个边框视图 #

如果边框是独立的元素，不需要绑定在最后一个字段项上，直接在数组遍历结束后判断数组非空就渲染即可：

{/* 先遍历渲染所有自定义字段 */}
{customFields.map(field => (
  <View style={styles.commonFieldStyle}>
    <Text>{field.label}：{field.value}</Text>
  </View>
))}
{/* 数组不为空时在末尾渲染边框 */}
{customFields.length > 0 && <View style={styles.borderContainer} />}

你当前的类型标注里value: any可以替换成你实际业务中自定义字段值的类型（比如string | number），可以提前规避很多类型相关的低级错误。

内容的提问来源于stack exchange，提问作者thinBillyBoy