正文 

当前位置： 首页 > 知识 >

React/Typescript：选定项目计数器逻辑

     2023-02-21     191

关键词：

【中文标题】React/Typescript：选定项目计数器逻辑【英文标题】：React/Typescript: Selected items counter logic 【发布时间】：2021-07-13 17:22:27 【问题描述】：

我一直在尝试创建一个带有计数器的选择列表。目标是能够选择尽可能多的项目，并有一个小标签，其中包含两个第一个选定项目的项目名称。至于其他项目，我想要一个显示“+ 剩余选定项目的数量”的计数器。但是，我对计数器的逻辑有点坚持。使其工作的最佳方法和语法是什么？非常感谢！

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

【问题讨论】：

你遇到了什么问题？ 目前，计数器始终显示 0。我假设逻辑应该类似于 ``` tags > 2 && ( counter ) ``` 没有真正的错误，只是有问题的逻辑。 你能为我们设置一个密码箱吗？ 【参考方案1】：

您的限制是否可能大于items 数组的长度？ 如果是这种情况，它将始终显示 0。

【讨论】：

嘿，科迪！是的，你完全正确。这是我需要的：items.length > 2【参考方案2】：

分辨率：

事实证明，解决方案非常简单，正如@Cody 在其中一个 cmets 中提到的那样，必须根据数组长度（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>
  );
``

【讨论】：

前端开发react+typescript项目初体验(代码片段)

创建React+TypeScript应用项目使用下面命令创建：比如我要创建一个叫react-typescript-demo的项目，npxreact-create-appreact-typescript-demo--templatetypescript创建成功后的目录结构如下：运行模板项目cd进入目录，并yarnstart跑起来... 查看详情

如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误？

】如何使用ESLint检查React/Typescript项目中的prop错误？【英文标题】：HowdoyoucheckforproperrorsinaReact/TypescriptprojectwithESLint?【发布时间】：2021-03-3019:43:00【问题描述】：我正在将create-react-appTypescript项目迁移到最新版本的create-react-app，... 查看详情

为 react typescript 项目设置 ts-jest

】为reacttypescript项目设置ts-jest【英文标题】：settingupts-jestforreacttypescriptproject【发布时间】：2018-12-1109:48:27【问题描述】：我正在尝试为用typescript编写的react项目设置测试环境。我之前已经为react做过，但使用的是ES6。以下是我... 查看详情

在react中使用typescript(代码片段)

前言　　用Typescript写React可比写Vue舒服太多了，React对ts的支持可谓天生搭档，如果要用ts重构项目，不像Vue对项目破坏性极大，React可以相对轻松的实现重构。顺便一提：全局安装的 create-react-app现已无法再下载完整的React项... 查看详情

如何使用 useState 在点击时显示/隐藏移动导航栏？ React + TypeScript + Tailwind 项目

】如何使用useState在点击时显示/隐藏移动导航栏？React+TypeScript+Tailwind项目【英文标题】：HowcanIshow/hidemobilenavbaronclickusinguseState?React+TypeScript+Tailwindproject【发布时间】：2021-10-3012:17:07【问题描述】：作为主题，我尝试使用“useState... 查看详情

在 React TypeScript 组件中导入 Javascript

】在ReactTypeScript组件中导入Javascript【英文标题】：ImportingJavascriptinReactTypeScriptcomponent【发布时间】：2021-05-2904:28:16【问题描述】：我正在使用TypeScript开始一个新的React项目，它是一个使用基本JS和HTML完成的旧项目的转换。我正... 查看详情

如何从 React Typescript 的整个项目中删除未使用的导入/声明？

】如何从ReactTypescript的整个项目中删除未使用的导入/声明？【英文标题】：HowcanIremoveunusedimports/declarationsfromtheentireprojectofReactTypescript?【发布时间】：2021-01-2913:37:18【问题描述】：我正在尝试删除thisSOthread中为Angular回答的未使... 查看详情

如何在 React+Typescript 中使用微数据？

】如何在React+Typescript中使用微数据？【英文标题】：HowtouseMicrodatainReact+Typescript?【发布时间】：2019-10-2316:37:39【问题描述】：当我将itemscopeitemtype="http://schema.org/Product"添加到h1时，我收到此错误：类型\'孩子：字符串;项... 查看详情

js加强篇！推荐10个好用的typescript的开源项目yyds！

...itHub上能挖矿的神仙技巧-如何发现优秀开源项目1.reactReactTypeScript备忘单。为经验丰富的React开发人员准备的TypeScript入门备忘单https://github.com/typescript-cheatsheets/react2.typescript-bookTypeScript权威指南，也可能是最好的TypeScript书籍&#x... 查看详情

新手向我是如何快速创建react+typescript项目(代码片段)

文章目录使用CreateReactApp目录结构解读绝对路径与相对路径代码格式化统一配置（可选）WhatisPrettier?Why?如何安装自动化执行代码格式化Pre-commitHook使用Pre-commitHook介绍解决冲突问题后续最后使用CreateReactAppCreateReactApp是一个... 查看详情

调试在 JetBrains Rider 中不起作用的 React Typescript 项目

】调试在JetBrainsRider中不起作用的ReactTypescript项目【英文标题】：DebuggingofaReactTypescriptprojectnotworkinginJetBrainsRider【发布时间】：2021-10-1621:00:05【问题描述】：我想做什么我有一个ReactTypescript项目，我想在Rider中设置一个调试配置... 查看详情

react+typescript+h5+antd-mobile项目搭建

参考技术A找到webpack.config.js，添加然后在module对象中的rules中解析less添加lib-flexible和postcss-pxtorem在index.tsx引入lib-flexible在webpack.config.js中配置postcss-pxtore插件，在postcssOptions中配置antd-mobile官网 查看详情

Webpack + React + TypeScript：未找到模块 ... in ... node_modules/react/

】Webpack+React+TypeScript：未找到模块...in...node_modules/react/【英文标题】：Webpack+React+TypeScript:Modulenotfound...in...node_modules/react/【发布时间】：2018-05-2303:33:34【问题描述】：我正在尝试用React、TypeScript和Webpack组合一个非常基本的项目... 查看详情

React/Typescript Ag-grid

】React/TypescriptAg-grid【英文标题】：【发布时间】：2017-01-2206:20:04【问题描述】：我正在尝试在我的应用程序中使用带有react和typescript的ag-grid。ag-grid.d.ts文件在项目中，所以我无法安装，然后使用typingsinstall--save...问题是当我尝... 查看详情

使用 React、Typescript 和 Webpack 显示静态图像

】使用React、Typescript和Webpack显示静态图像【英文标题】：DisplayingastaticimageusingReact,TypescriptandWebpack【发布时间】：2017-11-0221:01:15【问题描述】：我正在尝试使用webpack和webpack-dev-server在React组件中显示图像作为项目的一部分。到目... 查看详情

简单的网络摄像头/移动摄像头应用 React typescript

】简单的网络摄像头/移动摄像头应用Reacttypescript【英文标题】：Simplewebcam/mobilecameraappReacttypescript【发布时间】：2021-01-1519:55:20【问题描述】：我在为项目寻找合适的“即插即用”解决方案时遇到问题。该项目是使用typescript在Rea... 查看详情

React/Typescript /VScode - 导入路径不能以“.tsx”扩展名结尾

】React/Typescript/VScode-导入路径不能以“.tsx”扩展名结尾【英文标题】：React/Typescript/VScode-animportpathcannotendwitha\'.tsx\'extension【发布时间】：2020-05-0212:28:01【问题描述】：我有一系列已转换为typescript的react项目。其中一些使用webpack... 查看详情

React，Typescript - 找不到模块...或其相应的类型声明

】React，Typescript-找不到模块...或其相应的类型声明【英文标题】：React,Typescript-Cannotfindmodule...oritscorrespondingtypedeclarations【发布时间】：2021-02-2005:59:45【问题描述】：我在vs代码中使用create-react-app和yarn2创建了一个新项目。编辑... 查看详情