Javascript 反应/类型脚本：所选项目计数器逻辑

我一直在尝试创建一个带有计数器的选择列表。目标是能够选择我想要的任意多个项目，并为前两个选择的项目使用带有项目名称的小标记。至于其他项目，我希望有一个计数器显示“+{剩余选定项目的数量}”。然而，我有点被计数器的逻辑所束缚。让它工作的最佳方法和语法是什么？非常感谢

import { Tag } from './Tag';

type TagSize =  'sm' | 'md' | 'lg' ;

export type TagListProps = {
  items: Array<{
    id: string;
    label: string;
  }>;
  limit?: number;
  size?: TagSize;
  onRemove?(id: string): void;
};

export function TagList({
  items,
  limit,
  size = 'sm',
  onRemove
}: TagListProps): JSX.Element {

  const tags = limit ? items.slice(0, limit) : items;
  const counter = items.length - tags.length;

  return (
    <div className='tag-list'>
      {
        tags.map((tag) => (
          <Tag size={ size } className='single-tag' key='' removable onRemove={ () => onRemove(tag.id) }>
            { tag.label }
          </Tag>
        ))
      }

//that's the logic where I'm getting stuck 

      {  limit  && (
      <div className='items-counter'>
        { counter }
      </div>
        ) }

    </div>
  );
}

从“/Tag”导入{Tag}；
类型TagSize='sm'|'md'|'lg'；
导出类型TagListProps={
项目：阵列；
限制？：数量；
大小？：标记大小；
onRemove？（id:string）：void；
};
导出函数标记列表({
项目，
极限，
大小='sm'，
onRemove
}：TagListProps）：JSX.Element{
const tags=limit？items.slice（0，limit）：items；
常量计数器=items.length-tags.length；
返回(
{
tags.map（（tag）=>(
onRemove（tag.id）}>
{tag.label}
))
}
//这就是我陷入困境的逻辑
{限制&&(
{计数器}
) }
);
}

您的限制是否可能大于

项的长度

数组？ 如果是这种情况，将始终显示0。

分辨率：

结果证明，解决方案非常简单，正如@Cody在其中一条评论中提到的，限制必须根据数组长度设置（items.length>limit）。 以下是解决问题的方式：

type TagSize =  'sm' | 'md' | 'lg' ;

export type TagListProps = {
  items: Array<{
    id: string;
    label: string;
  }>;
  limit?: number;
  size?: TagSize;
  onRemove?(id: string): void;
};

export function TagList({
  items,
  limit,
  size = 'sm',
  onRemove
}: TagListProps): JSX.Element {

  const tags = limit ? items.slice(0, limit) : items;
  const counter = items.length - tags.length;

  return (
    <div className='tag-list'>
      {
        tags.map((tag) => (
          <Tag size={ size } className='single-tag' key='' removable onRemove={ () => onRemove(tag.id) }>
            { tag.label }
          </Tag>
        ))
      }

//that's the logic where I'm getting stuck 

      { items.length > limit && (
      <div className='items-counter'>
        { counter }
      </div>
        ) }

    </div>
  );
}``

类型TagSize='sm'|'md'|'lg'；
导出类型TagListProps={
项目：阵列；
限制？：数量；
大小？：标记大小；
onRemove？（id:string）：void；
};
导出函数标记列表({
项目，
极限，
大小='sm'，
onRemove
}：TagListProps）：JSX.Element{
const tags=limit？items.slice（0，limit）：items；
常量计数器=items.length-tags.length；
返回(
{
tags.map（（tag）=>(
onRemove（tag.id）}>
{tag.label}
))
}
//这就是我陷入困境的逻辑
{items.length>限制&&(
{计数器}
) }
);
}``

您遇到了什么问题？此时，计数器始终显示0。我假设逻辑应该是类似于`{tags>2&&（{counter}）}``的，实际上没有错误，只是有问题的逻辑。你能为我们设置一个代码沙盒吗？嘿，科迪！是的，你完全正确。我需要的是：items.length>2