仅在 typescript React 中对数组的最后一个索引进行样式设置？

Posted 2023-02-16

【中文标题】仅在 typescript React 中对数组的最后一个索引进行样式设置？

【英文标题】：Styling only to last index of an Array in typescript React?

【发布时间】：2021-12-14 07:45:07

【问题描述】：

我现在唯一的想法是

if (customFields.values[0]) 
    <View style=styles.borderContainer />;  

对于这个数组

let customFields: Array<
              value: any;
              label: string;
            > = [];

  if (query.data) 
              customFields = query.data.current_squad.custom_fields
                .filter(
                  (customField) =>
                    customField.is_visible_on_squads &&
                    customField.custom_field_value.value
                )
                .map((customField) => 
                  return 
                    value: customField.custom_field_value.value,
                    label: customField.title,
                  ;
                );
              
            

但这显然不起作用。 最终目标是在数组的最后一个位置创建一个边框，该边框基于一个自定义字段的数量。 我是前端和 JS 语言的新手，所以任何指向正确方向的指针都将不胜感激。

【参考方案1】：

map 高阶函数需要一个索引参数，但你需要在filter 函数之后和map 函数之前获取列表长度：

const exampleResult = custom_fields
  .filter(
    (customField) =>
      customField.is_visible_on_squads &&
      customField.custom_field_value.value
    )
)

const listLenght = exampleResult?.legnth;

const result = exampleResult
  .map(
    (customFiled, index) => 
      if(index === listLength -1 ) 
         return 
           value: customField.custom_field_value.value,
           label: customField.title,
           style: styles.borderContainer
         ;
       else 
         return 
           value: customField.custom_field_value.value,
           label: customField.title,
         ;
      
    
  )

作为另一种解决方案，您可以将样式属性添加到filter 和map 方法之后的最后一项：

const customFields = someData.filter(() => ).map(() => ) // just pseoudo

const lastItem = customFields[-1];

customFileds[-1] = ...lastItem, style: styles.borderContainer

【讨论】：

非常感谢您的回答我真的很感激。我目前正在与我的一位小组成员一起解决这个问题，我们将不得不更改其他一些代码以使其解决，但这真的很有帮助。

这是我的荣幸@thinBillyBoy，祝兄弟好运。